Relative：相對(duì)定位，定位離開之后之前的位置沒有釋放，基于之前的位置來說

Fixed：固定定位，始終是基于瀏" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 前端——CSS（2）以及京東購物車頁面編寫

前端——CSS（2）以及京東購物車頁面編寫

時(shí)間：2023-09-16 19:24:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-16 19:24:01 來源：網(wǎng)站運(yùn)營

前端——CSS（2）以及京東購物車頁面編寫：

css中的定位

Absolute：絕對(duì)定位，定位離開之后釋放之前的位置，基于外層父級(jí)標(biāo)簽來說

Relative：相對(duì)定位，定位離開之后之前的位置沒有釋放，基于之前的位置來說

Fixed：固定定位，始終是基于瀏覽器的左上角定位，適合做廣告

Static：初始的定位的操作

盒子模型

margin和padding：

margin：設(shè)置一個(gè)元素所有外邊距的寬度，可以設(shè)置四個(gè)值，例如：margin:10px 5px 15px 20px;從左到右依次是上右下左，是指從自身邊框到另一個(gè)容器邊框之間的距離，就是容器外距離。

padding：是指自身邊框到自身內(nèi)部另一個(gè)容器邊框之間的距離，就是容器內(nèi)距離。

CSS3新增屬性：

倒圓角指令：border-radius: 100px;

旋轉(zhuǎn)角度：transform: rotate(45deg);

放大的倍數(shù)：transform: scale(1.3);

X:水平的位移 Y ：垂直的位移 負(fù)數(shù)：上：transform: translate(0px,-5px);

2D角度的旋轉(zhuǎn) X Y：transform: skew(40deg,45deg);

陰影 （水平方向的偏移 垂直方向的偏移 模糊度 陰影的顏色）：box-shadow: 0px 0px 70px #D5093C;

動(dòng)畫標(biāo)簽：

@-ms-keyframes name{

from{}

to{}

}

@-ms-keyframes name{

0%{}

50%{}

100%{}

}

通過不同的時(shí)候達(dá)到不同的狀態(tài)來實(shí)現(xiàn)動(dòng)畫的效果

下面首先展示京東購物車頁面的制作成果：

下面分三部分展示我的代碼：

1.reset代碼：

body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px;padding: 0px;}body{text-align: center;font-size: 14px;}a{text-decoration: none;}li{list-style: none;}2.jd.css代碼，這個(gè)css文件部分是對(duì)格式的編寫，可以對(duì)照著下面展示的html文件進(jìn)行對(duì)比，一個(gè)一個(gè)進(jìn)行對(duì)照，來進(jìn)行代碼的理解。

.nav{ height: 30px; background-color: #E3E4E5; }.warp{ width: 1000px; margin: 0px auto;}.nav_ul1,.nav_ul2 li{ float: left;}.nav_ul1 li{ float: left; line-height: 30px; margin-right: 20px;}.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{ font-size: 12px; color: gray;}.nav_ul2{ float: right;}.nav_ul2 li,.nav_ul2 span{ line-height: 30px; margin-left: 15px;}.nav a:hover{ color: red;}.search{ margin-top: 20px;}.search img{ clear: both; float: left;}.search_div { float: right; margin-top: 25px;}.search_text{ width: 265px; height: 21px; border: 3px solid #c91623; position: relative; left: 4px; top: -1px;}.search_but{ width: 51px; height: 29px; background-color: #c91623; border: 0px; color: #FFFFFF;}.title{ margin-top: 130px;}.title h3{ float: left; font-size: 23px; color: #c91623;}.title div{ float: right; font-size: 14px; color: gray;}.tips{ width: 1000px; height: 50px; background-color: #F1F1F1; margin-top: 165px; border: 1px solid #E9E9E9;}.tips li{ float: left; line-height: 50px; font-size: 12px; color: gray;}.tips li:nth-child(1){width: 90px; border-top: 3px solid #c91623;}.tips li:nth-child(2){margin-left: 80px;}.tips li:nth-child(3){margin-left: 430px;}.tips li:nth-child(4){margin-left: 70px;}.tips li:nth-child(5){margin-left: 110px;}.tips li:nth-child(6){margin-left: 50px;}.info{ width: 1000px; height: 125px; background-color: #FFF4C8; border: 1px solid gray; margin-top: 30px; border-top: 3px solid gray;}.info li{ float: left; margin-top: 20px;}.info a{ font-size: 12px; color: #333333;}.info_1{ margin-left: 23px;}.info_2{ margin-left: 15px; border: 1px solid gray;}.info_3{ width: 250px; height: 20px;}.info_4{ margin-left: 40px;}.info_5{ margin-left: 70px;}.info_6{ margin-left: 40px;}.info_6 input{ width: 30px; height: 12px; text-align: center; position: relative; top: -2px; left: -5px;}.info_6 button{ width: 30px; height: 18px;}.bot{ position: relative; left: -10px;}.info_7{ margin-left: 60px;}.balance{ width: 1000px; height: 50px; border: 1px solid gray; margin-top: 30px;}.balance_ul1,.balance_ul1>li,.balance_ul2>li{ float: left; line-height: 50px; margin-left: 14px;}.balance_ul2{ float: right; }.butt{ width: 100px; height: 50px; background-color: #C91623; border: 0px; color: #FFFFFF; font-size: 20px; font-weight: bold;}.balance span{ font-size: 25px; color: #C91623; font-weight: bold;}.balance_ul2 li:nth-child(1){width: 120px;}.balance_ul2 li:nth-child(2){width: 150px;}3.HTML文件：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/jd.css"/> <link rel="stylesheet" type="text/css" href="icon/iconfont.css"/> </head> <body> <!--導(dǎo)航開始--> <div class="nav"> <div class="warp"> <ul class="nav_ul1"> <li><a href=""><i class="iconfont">&#xe6d3</i>京東首頁</a></li> <li><a href="">配送到:浙江</a></li> </ul> <ul class="nav_ul2"> <li><a href="">用戶登錄</a><span>|</span></li> <li><a href="">我的訂單</a><span>|</span></li> <li><a href="">我的京東</a><span>|</span></li> <li><a href="">京東會(huì)員</a><span>|</span></li> <li><a href="">企業(yè)采購</a><span>|</span></li> <li><a href="">客戶服務(wù)</a><span>|</span></li> <li><a href="">網(wǎng)站導(dǎo)航</a><span>|</span></li> <li><a href="">手機(jī)京東</a></li> </ul> </div> </div> <div class="search"> <div class="warp"> <img src="img/logo.jpg" /> <div class="search_div"> <input type="text" class="search_text" /> <input type="button" value="搜索" class="search_but" /> </div> </div> </div> <!--標(biāo)題開始--> <div class="title warp"> <h3>全部商品</h3> <div> <span>配送至</span> <select> <option>杭州市</option> <option>焦作市</option> <option>開封市</option> <option>新鄉(xiāng)市</option> </select> </div> </div> <div class="tips warp"> <ul> <li> <input type="checkbox" name="" id="" value="" /> 全選 </li> <li>商品</li> <li>單價(jià)</li> <li>數(shù)量</li> <li>小計(jì)</li> <li>操作</li> </ul> </div> <div class="info warp"> <ul> <li class="info_1"><input type="checkbox" /></li> <li class="info_2"><img src="img/img1.jpg" width="80px"/></li> <li class="info_3"><a>【京東超市】desha春秋季兒童休閑服</a></li> <li class="info_4"><a>顏色：灰色+粉紅</a></li> <li class="info_5">￥182.5</li> <li class="info_6"> <button>-</button> <input type="text" name="" id="" value="1" /> <button class="bot">+</button> </li> <li class="info_7">￥182.5</li> <li> <a>刪除</a><br /> <a>已到我的關(guān)注</a> </li> </ul> </div> <div class="info warp"> <ul> <li class="info_1"><input type="checkbox" /></li> <li class="info_2"><img src="img/img3.jpg" width="80px"/></li> <li class="info_3"><a>【京東超市】好孩子?jì)雰洪蠙煜匆乱?lt;/a></li> <li class="info_4"><a>顏色：灰色+粉紅</a></li> <li class="info_5">￥82.5</li> <li class="info_6"> <button>-</button> <input type="text" name="" id="" value="1" /> <button class="bot">+</button> </li> <li class="info_7">￥82.5</li> <li> <a>刪除</a><br /> <a>已到我的關(guān)注</a> </li> </ul> </div> <div class="info warp"> <ul> <li class="info_1"><input type="checkbox" /></li> <li class="info_2"><img src="img/img2.jpg" width="80px"/></li> <li class="info_3"><a>【京東超市】宏碁電腦，第六代智能英特爾</a></li> <li class="info_4"><a>顏色：深空灰</a></li> <li class="info_5">￥1882.5</li> <li class="info_6"> <button>-</button> <input type="text" name="" id="" value="1" /> <button class="bot">+</button> </li> <li class="info_7">￥1882.5</li> <li> <a>刪除</a><br /> <a>已到我的關(guān)注</a> </li> </ul> </div> <div class="balance warp"> <ul class="balance_ul1"> <li> <input type="checkbox" name="" id="" value="" /> 全選 </li> <li><a>刪除選中商品</a></li> <li><a>移到我的關(guān)注</a></li> <li><a>清除下柜商品</a></li> </ul> <ul class="balance_ul2"> <li>已選擇1件商品</li> <li>總價(jià)<span>￥12</span></li> <li> <button class="butt">去結(jié)算</button> </li> </ul> </div> </body></html>每一個(gè)div對(duì)應(yīng)的有多個(gè)css文件中的格式，div中的class名和css中的名字是一一對(duì)應(yīng)的，可能看起來比較亂，但是兩個(gè)文件的信息都是從上到下對(duì)應(yīng)起來的，所以仔細(xì)看還是比較有條理的。那么最終完成的成果就是最開始展示的圖片了

注意：如果發(fā)現(xiàn)css中不能很好的調(diào)整一個(gè)圖片或者元素的位置，就要檢查HTML中的結(jié)構(gòu)是否正確，我在制作的過程中就會(huì)因?yàn)槭д`嵌套div結(jié)構(gòu)，導(dǎo)致圖片的位置無法達(dá)到我想要的效果，所以運(yùn)行過程中有不正確的地方要認(rèn)真的檢查。

關(guān)鍵詞：編寫

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉