day 10 前端之css
讲了一天，好多个视频。虽说都不是很难吧，总觉得不会用。把练习题写了，写的比较慢，不过也都完成了。小米商城实在是有点无能为力，很讨厌这种庞大的东西，基础都不是很牢固。不过这个一方面也怪自己，一方面，本来前端就不是我们主要的点，只是顺带学吧。
感觉前端和自己不合，下周讲JS，这可咋整。连着中秋国庆，三周不上课。回来单位，慢慢自己看视频，一点点来，先是什么都不会。再到慢慢能调布局，居中啊，浮动呀。再接着是iconfont，一开始以为很玄妙，其实用几次也就是那样，差不多明白了。附上自己写的小米商城，有些细节不想弄了。前端这个东西，没有个止境
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>小米首页</title> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_858050_vtysyng9nj.css"> </head> <body> <div class="head"> <div class="container"> <div class="left"> <a href="">小米商城</a><span>|</span><a href="">MIUI</a><span>|</span><a href="">云服务</a> </div> <div class="right"> 登录 注册 消息 <a href=""><i class="iconfont icon-gouwuche-copy"></i></a> 购物车 </div> </div> </div> <div class="lists"> <div class="xiaomi" > <a href=""> <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2424829431,3650179751&fm=58&w=121&h=140&img.PNG" alt="" > </a> </div> <div class="products"> <span><a href="">小米手机</a></span> <span><a href="">红米</a></span> <span><a href="">电视</a></span> <span><a href="">笔记本</a></span> <span><a href="">空调</a></span> </div> <div class="search"> <form action=""> <input type="search" class='content' > <input type="submit" class="sea_sub iconfont" value=""> <div class="box"> <a class='key1' href="">小米8</a> <a class="key2" href="">mix2s</a> </div> </form> </div> </div> <div class="pic"> <div class="choice"> <ul>手机 电话卡 </ul> <a href=""><i class="iconfont"></i></a> <ul>电视 盒子 </ul> <a href=""><i class="iconfont"></i></a> <ul>笔记本 平板 </ul> <a href=""><i class="iconfont"></i></a> <ul>家电 插线板 </ul> <a href=""><i class="iconfont"></i></a> <ul>出行 穿戴 </ul> <a href=""><i class="iconfont"></i></a> <ul>智能 路由器 </ul> <a href=""><i class="iconfont"></i></a> </div> </div> <div class="sec"> <div class="left-one"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <div class="right-one"> <img src="https://i1.mifile.cn/a4/df7c6d47-c09f-49d1-9a9f-df0d2294bec8" alt="" > </div> <div class="right-two"> <img src="https://i1.mifile.cn/a4/xmad_15382348153503_PhHON.jpg" alt=""> </div> <div class="right-three"> <img src="https://i1.mifile.cn/a4/xmad_15382347809011_iElHK.jpg" alt=""> </div> </div> </body> </html>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
@font-face {
font-family: 'iconfont'; /* project id 858050 */
src: url('//at.alicdn.com/t/font_858050_kxb8p4fgbjk.eot');
src: url('//at.alicdn.com/t/font_858050_kxb8p4fgbjk.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_858050_kxb8p4fgbjk.woff') format('woff'),
url('//at.alicdn.com/t/font_858050_kxb8p4fgbjk.ttf') format('truetype'),
url('//at.alicdn.com/t/font_858050_kxb8p4fgbjk.svg#iconfont') format('svg');
}
/*标题栏*/
.head{
height: 40px;
color: white;
background-color: #292929;
}
.container{
width: 1240px;
margin: 0 auto;
background-color: yellow;
}
.head .left{
float: left;
padding: 10px;
width: 400px;
/*background-color: red;*/
}
.head .right{
float: right;
padding: 10px;
width: 300px;
/*background-color: blue;*/
}
.container .left a{
text-decoration: none;
color: white;
width: auto;
height: 20px;
display: inline-block;
}
.container .right .icon-gouwuche-copy{
font-size: 18px;
color: #999999;
}
.icon-gouwuche-copy a{
text-decoration: none;
}
.lists{
width: 100%;
height: 56px;
background-color:#ffecec;
margin:0 auto;
}
/*小米图标*/
.xiaomi{
display: inline-block;
float: left;
margin-left: 99px;
}
.xiaomi img{
width: 50px;
height: 50px;
}
.products{
width: 600px;
height: 50px;
/*background-color: #969896;*/
float: left;
margin-left: 5px;
}
.products span{
display: inline-block;
width: auto;
font-size: 20px;
text-align: center;
margin-top: 15px;
}
.products span a{
color: black;
}
.search{
width: 300px;
height: 50px;
float: right;
/*background-color: green;*/
position: relative;
}
.search form{
width: 280px;
height: 50px;
}
.search .content{
width: 200px;
height: 42px;
margin-top: 5px;
}
.search .sea_sub{
font-size: 25px;
text-align: center;
width: 40px;
height: 40px;
margin-top: 5px;
padding-left: 5px;
position: relative;
top: 4px;
left: 0;
}
.search a{
position: absolute;
color: grey;
font-size: 13px;
}
.search .key1{
top: 21px;
right: 199px;
}
.search .key2{
top: 21px;
right: 151px;
}
/*轮播图*/
.pic{
width: 1226px;
height: 460px;
margin: 0 auto;
background-color: yellow;
position: relative;
background: url("https://i1.mifile.cn/a4/xmad_15378467692556_lnrbU.jpg");
}
/*选项卡*/
.choice{
width: 234px;
height: 460px;
background-color: #969896;
position: absolute;
top: 0px;
left: 0px;
}
.choice ul{
display:inline-block;
width: 175px;
height:30px;
padding-top: 21px;
padding-left: 21px;
color: white;
}
.choice i{
display: inline-block;
color: white;
}
.sec{
width: 1226px;
height: 300px;
background-color: aquamarine;
margin: 0 auto;
}
.left-one{
display: inline-block;
margin-top: 10px;
width: 234px;
height: 170px;
background-color: #df5000;
float: left;
}
.left-one li{
text-decoration: none;
display: inline-block;
width: 70px;
height: 78px;
margin: 1px;
background-color: gray;
}
.right-one,.right-two,.right-three{
display: inline-block;
margin-top: 10px;
width: 270px;
height: 170px;
}
.right-one{
background-color: greenyellow;
float: right;
margin-right: 10px;
}
.right-two{
background-color: antiquewhite;
float: right;
margin-right: 10px;
}
.right-three{
background-color: cornflowerblue;
float: right;
margin-right: 10px;
}
.sec img{
width: 260px;
height: 160px;
}
自己还是比较满意的，至少比刚开始的时候好很多。
浙公网安备 33010602011771号