刚接触前端的第6天。。。根据样式做页面好难呀。。。
目前主要的痛点:
- PS不熟练
- 页面结构拆分的不合理,简单问题复杂化。。。
- css语法不熟悉
- 脑子不好
所以只能多练习。。。
无聊的样式图(1)
h5
<div class="sport">
<div class="title">
<div><img src="images/1_03.jpg" alt=""></div>
<p>运动小白</p>
</div>
<ul>
<li><a href="#"> 懒人运动</a></li>
<li><a href="#"> 跑步姿势</a></li>
<li><a href="#"> 健身干货</a></li>
<li><a href="#"> 跑酷生活</a></li>
<li><a href="#"> IN装备</a></li>
<li><a href="#"> 识品牌</a></li>
</ul>
</div>
CSS
.sport ul{
padding: 0;
margin: 0;
list-style: none;
}
.sport a{
text-decoration: none;
font: 14px/26px "宋体";
color: #5b5b5b;
}
.sport{
background-color: #ffffff;
width: 190px;
margin-left: auto;
margin-right: auto;
}
.title{
background-color: #1498d6;
}
.title div{
width: 26px;
height: 26px;
padding-left: 85px;
padding-top: 5px;
}
.title p{
font: 12px/24px "宋体";
color: #f7fdfb;
text-indent: 74px;
}
.sport li{
/* font: 14px/26px "宋体";
color: #5b5b5b; */
padding-top: 23px;
margin-left: 41px;
margin-right: 42px;
border-bottom: 1px solid #eaeaea;
text-indent: 27px;
}
无聊的样式图(2)
h5
<div class="client">
<h3>{客户案例}</h3>
<h4>WITH THE BEST PROFESSIONAL TECHNOLOGY,TO DESIGN THE BEST INNOV ATIVE WEB SITE </h4>
<div class="img">
<div class="img_1"> <img src="images/2_07.jpg" alt=""> </div>
<div class="img_2"> <img src="images/2_07.jpg" alt=""> </div>
<div class="img_3"> <img src="images/2_07.jpg" alt=""> </div>
</div>
<div class="a"><a href="#">view more</a></div>
</div>
css
.client{
width: 1087px;
height: 395px;
background: #f8f8f8;
margin-left: auto; /* 居中显示 */
margin-right: auto;
}
.client h3{
font: 20px/30px "微软雅黑";
padding: 13px 0 0 491px;
color: #46c5b7;
}
.client h4{
font: 14px/26px "微软雅黑";
color: #c2aa9d;
word-spacing: 5px;
padding-left: 231px;
}
.img >div{
width: 339px;
height: 181px;
padding-top: 35px;
}
.client .img_1{
padding-left: 15px;
position: absolute;
}
.client .img_2{
padding-left: 373px;
float: left; /* 设置浮动效果 */
position: absolute;
}
.client .img_3{
padding-left: 731px;
float: left;
}
.client a{
font: 14px/37px Arial;
text-decoration: none;
color: #befffe;
text-transform: uppercase;
}
.client .a{
width: 176px;
height: 37px ;
margin: 254px 0 0 456px; /* 上面的div使用了绝对定位。这个div是相对于h4所在的位置 */
border-radius: 12px 12px 12px 12px;
background-color: #26c7b8;
text-indent: 47px;
}
无聊的样式图(3)
h5
<div class="Lemon">
<h3> 成功案例 <span>SUCCESSFUL CASE</span></h3>
<div><img src="images/3_03.jpg" alt=""></div>
<h4>家饰类 : 柠檬树</h4>
<p>今天的O2O,实际是互联网经济和传济水乳交融纠结又沟业经营的角度,我讲讲这些年来...</p> <!-- 结构块采用块级标签,在一个结构里面再次进行区分时考虑行级标签 -->
</div>
css
.Lemon{
width: 362px;
height: 416px;
color: #ffffff;
margin-right: auto;
margin-left: auto; /* 居中显示 */
}
.Lemon h3{
width: 309px;
font: bold 24px/34px "微软雅黑";
color: #006da3;
padding: 20px 0 0 27px;
}
.Lemon h3>span{
font: 20px/34px Arial;
color: #aba7a1;
/* float: right; 用text-align:right; 不会右对齐
用 float文字会上飘。。。
*/
float: right;
}
.Lemon div{
width: 309px;
height: 226px;
padding: 20px 0px 0px 27px;
}
.Lemon >h4{
font: 14px/32px "微软雅黑";
color: #898681;
padding-left: 27px;
padding-top: 11px;
}
.Lemon >p{
width: 309px;
font: 12px/21px "微软雅黑";
color: #c4c1ba;
padding-left: 27px;
}
无聊的样式图(4)
h5
<div class="free">
<div>
<h3>免费食宿</h3>
<p>封闭式教学,高端食宿环境给学员有力的 <br> 后勤保障。</p>
</div>
</div>
css
.free{
width: 487px;
height: 156px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
}
.free >div{
width: 470px;
height: 119px;
background-color: #f8f8f8;
border-right: 2px solid #4caafc;
margin: 18px 0 0 6px;
background: url(images/task1_03.jpg) no-repeat;
}
.free h3{
font: 28px/56px "微软雅黑";
color: #333333;
padding: 3px 0 0 114px;
}
.free p{
font: 18px/27px "微软雅黑";
color: #787878;
padding-left: 114px;
}
无聊的样式图(5)
h5
<div class="insurance">
<h4>境外旅游保险</h4>
<div>
<p>为境外线路贴心打造,提供意外身故、医疗、24小时紧急搜救等综合保障,异国他乡也能畅行无忧!</p>
<div>查看全部产品></div>
</div>
</div>
css
.insurance{
width: 238px;
height: 378px;
background-color: #ffffff;
margin-right: auto;
margin-left: auto;
}
.insurance >h4{
width: 224px;
font: 22px/36px "微软雅黑";
color: #0088d3;
margin: 7px;
border-bottom: 2px solid #42a6f5;
}
.insurance >div{
width: 224px;
height: 315px;
margin: 16px 0 0 7px;
background: url(images/task2.jpg) no-repeat;
}
.insurance >div p{
font: 14px/26px "微软雅黑";
color: white;
padding: 21px 17px 0 16px;
}
.insurance >div div{
font: 14px/24px "微软雅黑";
color: #355b94;
padding-top: 157px;
text-indent: 65px;
}
无聊的样式图(6)
h5
<div class="menu">
<ul>
<li class="a1"><a href="#">菜谱大全</a> </li>
<li class="a2"><a href="#">食材大全</a> </li>
<li class="a3"><a href="#">品质珍选</a> </li>
<li class="a4"><a href="#">专题专区</a> </li>
<li class="a5"><a href="#">一起红</a> </li>
</ul>
</div>
css
.menu{
width: 219px;
height: 360px;
background-color: #a09c96;
margin-right: auto;
margin-left: auto;
}
.menu ul{
list-style: none;
padding: 0;
margin: 0;
}
.menu li{
width: 219px;
background: url(images/menu_06.jpg) no-repeat 198px ;
/* border: red solid 1px; */
text-indent: 49px;
}
.menu .a1{
padding-top: 31px;
background: url(images/menu_03.jpg) no-repeat 20px 52px;
}
.menu .a2{
background: url(images/menu_11.jpg) no-repeat 20px;
}
.menu .a3{
background: url(images/menu_15.jpg) no-repeat 20px;
}
.menu .a4{
background: url(images/menu_18.jpg) no-repeat 20px;
}
.menu .a5{
background: url(images/menu_20.jpg) no-repeat 20px;
}
.menu a{
font: 18px/60px "微软雅黑";
color: #ffffff;
text-decoration: none;
}
无聊的样式图(7)
HTML
<div class="serve">
<div class="img"><img src="images/icons1.png" alt=""></div>
<h3>一站式专属服务</h3>
<p>全国470家直营分部</p>
</div>
css
.serve{
width: 250px;
height: 420px;
margin-right: auto;
margin-left: auto;
background: url(images/1.jpg) no-repeat;
}
.serve div{
width: 73px;
height: 98px;
padding: 120px 0 0 89px;
}
.serve h3{
font: 24px/34px "微软雅黑";
color: white;
padding-top: 20px;
text-indent: 41px;
}
.serve p{
font: 18px/28px "微软雅黑";
color: white;
padding-top: 8px;
text-indent: 47px;
}
无聊的样式图(8)
HTML
<div class="digital">
<ul>
<li><a href="#">手机电话卡</a></li>
<li><a href="">电视盒子</a> </li>
<li><a href="">笔记本显示器</a></li>
<li><a href="">家电插线板</a></li>
<li><a href="">出行穿戴</a></li>
<li><a href="">智能路由器</a></li>
<li><a href="">电源插件</a></li>
<li><a href="">健康儿童</a></li>
<li><a href="">耳机音箱</a></li>
<li><a href="">生活箱包</a></li>
</ul>
</div>
css
.digital{
width: 233px;
height: 439px;
background-color: #929399;
margin-right: auto;
margin-left: auto;
padding-top: 21px;
}
.digital ul{
padding: 0;
margin: 0;
list-style: none;
}
.digital li{
width: 233px;
height: 42px;
text-indent: 28px;
}
.digital a{
font: 14px/42px "微软雅黑";
color: white;
text-decoration: none;
}
.digital li:hover{/* li和分号之间不能加空格 */
background-color: #ff6700;
}