模仿努比亚网站三（内容区域）

/*内容区域*/
.content {height: 1883px;width: 100%;
}.content > dl {width: 1200px;height: 100%;margin: 0 auto;overflow: hidden;
}/*设置标题*/
.content > dl > dt {text-align: center;margin-top: 40px;margin-bottom: 30px;
}/*设置文字大小*/
.content > dl > dt > h3 {font-size: 35px;color: #333333;
}.content > dl > dt > p {margin-top: 20px;color: #e8340e;}/*设置手机图片的排版*/
.content .content_phone {width: 1200px;height: 1200px;
}/*设置phone里的li*/
.content .content_phone > li {float: left;background-color: white;position: relative;overflow: hidden;
}/*设置每张图片*/
.content .content_phone > li > img {width: 100%;/*所有动画统一设置过度动画*/transition: all 1s;}.content .content_phone > li:nth-child(1) img {margin-top: 60px;
}.content .content_phone > li:nth-child(1) {width: 1200px;height: 395px;margin-bottom: 10px;
}/*默认偏移一点*/
.content .content_phone > li:nth-child(1) img {margin-left: -100px;
}.content .content_phone > li:nth-child(3) img {margin-left: 100px;
}/*悬停恢复*/
.content .content_phone > li:nth-child(1):hover img {margin-left: 0;
}.content .content_phone > li:nth-child(3):hover img {margin-left: 0;
}
/*单独给其他三个设置放大动画*/
.content .content_phone>li:hover .img_scale {transform: scale(1.2);
}
.content .content_phone > li:nth-child(2) {width: 395px;height: 795px;margin-right: 10px;
}.content .content_phone > li:nth-child(3) {width: 795px;height: 390px;margin-bottom: 10px;
}.content .content_phone > li:nth-child(4) {width: 390px;height: 395px;margin-right: 10px;
}.content .content_phone > li:nth-child(5) {width: 395px;height: 395px;
}/*设置图片下的描述*/
.content .content_phone .phone_des {width: 200px;position: absolute;left: 50%;margin-left: -100px;bottom: 10px;text-align: center;
}.content .content_phone .phone_des > h4 {font-size: 20px;color: #000000;
}.content .content_phone .phone_des > p {font-size: 15px;margin-bottom: 10px;color: #999999;
}/*设置边框*/
.content .content_phone .phone_des > span {display: inline-block;width: 108px;height: 32px;text-align: center;line-height: 32px;border: 1px solid #cccccc;border-radius: 10px;color: #000000;
}/*单独设置第一张图片*/
.content .content_phone > li:nth-child(1) .phone_des {left: 0;margin-left: 800px;bottom: 150px;
}/*设置配件的排版*/
.content .content_pj {width: 1200px;height: 300px;display: flex;justify-content: space-between;
}.content .content_pj > li {float: left;width: 295px;height: 300px;background-color: white;overflow: hidden;/*margin-right: 5px;*/
}
/*设置图片*/
.content .content_pj > li >img {width: 100%;transition: all 1s;
}
.content .content_pj > li >p {text-align: center;margin-top: 25px;
}
/*设置悬停动画*/
.content .content_pj > li:hover img {transform: scale(1.2);
}

<!--内容区域-->
<div class="content"><!--采用dl结构--><dl><!--头部文字介绍--><dt><h3>最新产品</h3><p>查看全部手机 &gt;</p></dt><dd><!--添加图片--><ul class="content_phone"><li><img src="data:images/con-phone1.jpg" alt=""><div class="phone_des"><h4>Z11极光蓝</h4><p>极光蓝</p><span>一探究竟</span></div></li><li><img src="data:images/con-phone2.jpg"  class="img_scale" alt=""><div class="phone_des"><h4>Z11极光蓝</h4><p>极光蓝</p><span>一探究竟</span></div></li><li><img src="data:images/con-phone3.jpg" alt=""><div class="phone_des"><h4>Z11极光蓝</h4><p>极光蓝</p><span>一探究竟</span></div></li><li><img src="data:images/con-phone4.jpg"   class="img_scale" alt=""><div class="phone_des"><h4>Z11极光蓝</h4><p>极光蓝</p></div></li><li><img src="data:images/con-phone5.jpg"  class="img_scale" alt=""><div class="phone_des"><h4>Z11极光蓝</h4><p>极光蓝</p></div></li></ul></dd><dt><h3>精选配件</h3><p>查看全部配件 &gt;</p></dt><dd><ul class="content_pj"><li><img src="data:images/accessories1.jpg" alt=""><p>努比亚快充移动电源</p></li><li><img src="data:images/accessories2.jpg" alt=""><p>努比亚圈铁耳机</p></li><li><img src="data:images/accessories3.jpg" alt=""><p>努比亚快炫美自拍杆</p></li><li><img src="data:images/accessories4.jpg" alt=""><p>nubia摄影三脚架</p></li></ul></dd></dl>
</div>

注意点

1.内容区域主要是标题加图片内容，可以使用dl里的dt和dd实现，类似表格的标题和内容。

2.给子元素设置margin属性，父元素会被顶下来，可以给父元素设置边框，或给父元素设置overflow：hidden;

3.内容区域的图片可以利用浮动的贴靠现象来实现。浮动会紧贴但是改行不够宽度会另起一行，采用ul里的li来浮动。

4.添加图片时，我们将图片·的宽度设置成li宽度，高度等比拉升即可。再微调每张图片。

5.描述信息和按钮放到单独盒子中，然后统一设置盒子样式，最后第一张图片单独设置。上边居中设置了left:50%要记得清除，在重新设置。

6.添加图片悬停动画，修改默认margin-left值，一悬停复位即可。

模仿努比亚网站三（内容区域）相关推荐

模仿努比亚网站（顶部完成）
模仿努比亚网站(顶部) 流程 1.创建站点文件夹,子文件夹尽量不要用中文. 2.重置所有的默认样式和设置一些全局样式,并且将设置样式的css文件和相应的页面关联起来.(全局样式通过观察页面字体颜色风格 ...
努比亚牵手天威诚信，共同打造多域名网站安全解决方案
域名作为网站的入口,对企业营销型网站建设起着至关重要的作用,尤其是做C端业务的企业网站,往往拥有多个域名,在PC端.Web端.移动端等全渠道营销环境下,企业通过多域名网站增加获客机会的同时,也意味着要 ...
unity双面显示在哪_双面屏努比亚Z20售3499起 4800万三摄+855Plus+4K电池
[PConline 资讯]8月8日,努比亚Z20年度旗舰新品发布会在北京举行,努比亚更新旗下旗舰级Z系列,为其配备双面柔性OLED屏幕.4800万三摄.30倍变焦.游戏四指操控等实用体验功能. 努比亚 ...
HTML连载87-完善内容区域
一.先上成型之后的图 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
HTML连载88-今天把努比亚界面仿真写完了（完结连载）
一.完结HTML连载,手写努比亚首页界面 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
模仿某招聘网站的Js搜索菜单
< html > < head > < meta http-equiv ="Content-Type" content ="te ...
pb网络编程_可在家中建立三个区域聆听空间，Integra DRX3.3 9.2声道网络影音接收机...
专为满足您的娱乐梦想而研发 DRX-3.3可让您在家中建立最多三个区域的聆听空间,升级的四核SoC支持802.11ac(MIMO)高速Wi-Fi®规格让多房间无线音频串流更顺畅,同时还可享受最高5.2 ...
Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
z9mini android5,Nubia 努比亚 Z9mini 入手体验
Nubia 努比亚 Z9mini 入手体验 2015-04-09 17:29:34 107点赞 66收藏 150评论如果你也是电信用户但是有双卡需求如果两张卡都有数据流量可以使用那Z9MINI ...

模仿努比亚网站三（内容区域）

模仿努比亚网站三（内容区域）

注意点

模仿努比亚网站三（内容区域）相关推荐

最新文章

热门文章