當前位置：
首頁 >
第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...
發布時間：2024/6/21
70
豆豆
生活随笔
收集整理的這篇文章主要介紹了
第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html5+css3移動手機端流體布局，基礎CSS,頭部設計,輪播設計,底部設計
?
基礎CSS
首先將通用css屬性寫好
@charset "utf-8"; /*通用樣式*/ /*去除所有元素的內外邊距*/ *{margin: 0;padding: 0; } /*去除所有ul里li的小圓點*/ ul{list-style-type: none; } /*去除所有a的下劃線*/ a{text-decoration: none; } /*將圖片轉換成區塊，將圖片最大寬度設置成100%,使圖片自適應*/ img{display: block;max-width: 100%; } /*通用樣式結束*/?
頭部設計
?我們用新單位rem就是以根元素掛鉤來計算大小，首先將根元素字體設置成16px作為基準
html{font-size: 16px; }這后面的單位就以這基準的rem就是倍數來計算，區塊寬度基本用max-width最大寬度設定和百分比來設置，這樣小于這個寬度的也能自適應
?
寬度設置，與rem單位計算
注意：手機網站，手機屏幕尺寸不一樣，寬度不能做絕對寬度，只能用最大寬度和百分比來做，
rem是與根元素掛鉤的，我們的根元素字體設置成16px作為基準，
頁面最大寬度為640像素
所以我們設置導航的最大寬度為40ren，換算方式是要設置的寬度像素除以根基準像素，得出的就是rem的單位，（640除以16=40），所以導航的最大寬度設置為40rem也就是640像素
導航高度設置45像素
就是45除以根基準，（45除以16=2.8125）我們就設置成2.8rem
?
單位計算
要設置的像素除以根基準=rem單位
rem單位乘以根基準=像素
換算子元素寬度站父元素寬度的百分之幾，子元素寬度除以父元素寬度=子元素寬度站父元素寬度的百分之幾
將子元素寬度站父元素寬度的百分之幾換算成像素，父元素的寬度乘以子元素寬度的百分之幾=子元素的像素
?
完成效果：
?
html代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><!--自適應手機，禁止縮放--><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>瓢城旅行社</title><link rel="stylesheet" href="css/index.css"></head> <body><!--頭部導航--> <header id="dao-hang"><div class="dao-hang2"><h1>瓢城旅行社</h1><nav><h2>網站導航</h2><ul><li class="dao-hang-lie-biao shou"><h3><a href="index.html">首頁</a></h3></li><li class="dao-hang-lie-biao"><h3><a href="#">資訊</a></h3></li><li class="dao-hang-lie-biao"><h3><a href="#">機票</a></h3></li><li class="dao-hang-lie-biao"><h3><a href="#">關于</a></h3></li></ul></nav></div> </header> <!--圖片輪播--> <div class="lun-bo"><img src="img/adver.png"> </div> <!--搜索--> <div class="sou-su"><input type="text"><button>搜索</button> </div><!--尾部--> <footer class="wei-bu"><div class="wei-bu2"><p>客戶端 | 觸屏版 | 電腦版</p></div><div class="wei-bu3"><P>Copyright © YCKU 瓢城旅行社 | 蘇ICP備120110119號 </P></div> </footer></body> </html>css代碼
@charset "utf-8"; /*通用樣式*/ /*去除所有元素的內外邊距*/ html{font-size: 16px; } /*設置字體*/ body{font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; } *{margin: 0;padding: 0; } /*去除所有ul里li的小圓點*/ ul{list-style-type: none; } /*去除所有a的下劃線*/ a{text-decoration: none; } /*將圖片轉換成區塊，將圖片最大寬度設置成100%,使圖片自適應*/ img{display: block;max-width: 100%; } /*將邊框算在元素尺寸內*/ div{box-sizing: border-box; } /*通用樣式結束*//*頭部導航*/ #dao-hang .dao-hang2{width: 100%;height: 2.8rem;background-color: #333333; } #dao-hang .dao-hang2 h1{display: none; } #dao-hang .dao-hang2 h2{display: none; } #dao-hang .dao-hang2 ul{max-width: 40rem;height: 2.8rem;margin: 0 auto;color: #FFFFFF; } #dao-hang .dao-hang2 ul li{width: 25%;height: 2.8rem;float: left;line-height: 2.8rem;text-align: center;font-size: 15px; } #dao-hang .dao-hang2 ul li a{display: block;width: 100%;height: 2.8rem;color: #FFFFFF;font-weight: normal; } #dao-hang .dao-hang2 ul li a:hover, #dao-hang .dao-hang2 .shou{background-color: #000000; } /*圖片輪播*/ .lun-bo{max-width: 40rem;max-height: 12.5rem;background-color: #3835ff;margin: 0 auto; } /*搜索*/ .sou-su{max-width: 40rem;height: 2.5rem;background-color: #DCE1E7;margin: 0 auto;padding: 7px 0 0 0;position: relative; } .sou-su input{width: 87%;height: 26px;display: block;margin: 0 auto;border: 1px solid #5F89C4;border-radius: 6px;position: relative;outline: none; } .sou-su button{display: block;width: 50px;height: 26px;border-radius: 0 6px 6px 0;position: absolute;top: 8px;right: 6.2%;border: none;background-color: #5F89C4;outline: none;cursor: pointer; }/*尾部*/ .wei-bu{max-width: 40rem;;min-height: 69px;margin: 0 auto;background-color: #333333;color: #6F6F6F;text-align: center; } .wei-bu .wei-bu2{width: 100%;height: 34px;line-height: 34px;font-size: 17px; } .wei-bu .wei-bu3{width: 100%;font-size: 17px; }?
轉載于:https://www.cnblogs.com/adc8868/p/6003527.html
總結
以上是生活随笔為你收集整理的第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Uva 1220，Hali-Bula 的
- 下一篇： 10种CSS3实现的Loading效果