网页部分重构（网易）

经过对页面布局以及插入图片位置的不断调整，逐渐熟悉CSS样式规则以及多种选择器的应用。

代码记录

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网易严选</title><style>html,body{width: 1250px; ;margin: 0;padding: 0;}.header{margin-top: 60px;padding-top: 60px;height: 100px;}.popularity{margin-bottom: 60px;height: 780px;background-color: rgb(204, 228, 236);}.name{margin: 0px 20px 0px 100px;padding-top: 0px;font-size: 28px;display: inline-block;}.name:hover{color: rgb(122, 17, 122);cursor: pointer;}.headerLeft{display: inline-block;margin: 10px 20px 10px 10px;padding-left: 10px;padding-right: 10px;}.headerLeft:hover{cursor: pointer;color: rgb(145, 32, 145);}.checked{color: rgb(184, 38, 171);border-bottom: 2px solid rebeccapurple;}.headerRight{margin-top: 13px;margin-right: 60px;float: right;display: inline;}.headerRight:hover{color: rgb(145, 32, 145);cursor: pointer;}.headerLeft,.headerRight{font-size: 14px;}#productItemfirst{margin-left: 0px;width: 390px;height: 570px;}#productItemFirst>:nth-child(2) {width: 320px;margin: 40px 35px;}#productItemFirst>:first-child {width: 48px;height: 48px;position: absolute;}#productItemFirst>:nth-child(2):hover {margin: 35px 30px;width: 336px;height: 336px;cursor: pointer;}.productItem {margin-left: 10px;background-color: white;width: 223px;height: 280px;float: left;}.productItem>:nth-child(2) {width: 200px;margin: 80px 100px;}.productItem>:first-child {width: 48px;height: 48px;position: absolute;}.productItem>:nth-child(2):hover {margin: 60px 80px;width: 240px;height: 240px;cursor: pointer;}.product{margin-left: 100px;}.product>:nth-child(5),.product>:nth-child(6),.product>:nth-child(7){margin-top: 10px;}#productItemFirst>.title {width: 100%;text-align: center;border-top: 1px solid #f4f0eb;}#productItemFirst>.title>.name {margin: 40px 71px 13px 71px;padding-top: 0px;font-size: 18px;display: inline-block;}#productItemFirst>.title>.name:hover {color: #b1a07d;cursor: pointer;}#productItemFirst>.title>.price {color: #D4282D;font-size: 18px;}/* 其它商品卡片的title样式 */.productItem>.title {width: 100%;text-align: center;border-top: 1px solid #f4f0eb;}.productItem>.title>.name {margin: 0 43.5px 4px;padding-top: 0px;font-size: 13px;display: inline-block;}.productItem>.title>.name:hover {color: #b1a07d;cursor: pointer;}.productItem>.title>.price {color: #D4282D;font-size: 13px;margin: 0;}</style>
</head>
<body><div class="popularity" ><div class="headr"><h3 class="name">人气推荐</h3><div class="headerLeft checked">编辑推荐</div><div class="headerLeft">热销总榜</div><div class="headerRight">更多推荐></div></div><div class="product"><div id="productItemfirst" class="productItem"><img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">    <img src="https://yanxuan-item.nosdn.127.net/5d89a6f902e09a90d75db57c39c1b817.png?imageView&thumbnail=230x230&quality=95" alt="图片丢失"><div class="title"><h5 class="nameo">有效抑菌配方 免洗净手喷雾10ml便携卡片装</h5><p class="price">￥21.8</p></div></div><div class="productItem"><img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失"><div class="title "></div></div><div class="productItem">3</div><div class="productItem">4</div><div class="productItem">5</div><div class="productItem">6</div><div class="productItem">7</div></div></div></body></html>

效果展示

关于选择器：

first-child伪类选择器是选择它父元素的第一个孩子的所有元素，这个父元素可以为任意的元素，比如body/div/section...，所以first-child可以选择大部分p标签。另外伪类比元素选择器有更高的优先级，即first-child会覆盖掉div > p的样式。

关于边距：

1.外边距
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。
margin: 25px 50px 75px 100px;
margin-top：25px
margin-right：50px
margin-bottom：75px
margin-left：100px

可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注释：
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

2.内边距
CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。
CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

若要将宽度保持为 300px，无论填充量如何，那么可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

关于浮动（float）：

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

网页部分重构（网易）相关推荐

照葫芦画瓢之python爬虫系列----（2）初次爬取简单的动态网页数据（网易、QQ音乐排行榜）
感谢提供素材的同学,无论好坏,高低,我都真心佩服你:参考文章地址:https://mp.weixin.qq.com/s/AXr8BjR_tU-E9YBo-mLVlg 爬取网易云音乐榜单在上一篇的文章 ...
乐乎常用的html源码,LOFTER网页版登录入口
LOFTER网页版登录入口是一款由网易官方所推出的集轻博客以及社交聊天等功能为一体的软件,LOFTER网页版PC端拥有非常丰富的高热度兴趣标签,包括了:追剧党.电影发烧友.手账狂热分子等等,每一位用户 ...
动态网页怎样才能被搜索引擎收录
动态网页怎样才能被搜索引擎收录动态网页怎样才能被搜索引擎收录呢?其实动态网页被搜索引擎收录和静态网页被收录的原理是一样的,只是因为两种网页表现形式的差异造成了搜索引擎索引这些文件的方式有所不同,动态网 ...
iPhone助阵网易邮箱抢占移动互联网制高点
iPhone助阵网易邮箱抢占移动互联网制高点<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:of ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
X-UA-Compatible
X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使用.可以在微软官方文档获取更多介绍. ...
朋友圈装死，微博蹦迪，Python教你如何掌握女神情绪变化 | CSDN博文精选
作者 | A字头来源 | 数据札记倌很多人都是在朋友圈装死,微博上蹦迪. 微信朋友圈已经不是一个可以随意发表心情的地方了,微博才是! 所以你不要傻傻盯着女神的朋友圈发呆啦! 本文教你如何用Pyth ...
python自动化发送邮件_python接口自动化（三十三）-python自动发邮件总结及实例说明番外篇——下（详解）...
简介发邮件前我们需要了解的是邮件是怎么一个形式去发送到对方手上的,通俗点来说就是你写好一封信,然后装进信封,写上地址,贴上邮票,然后就近找个邮局,把信仍进去,其他的就不关心了,只是关心时间,而电子邮 ...
X-UA-Compatible 1
X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使用.可以在微软官方文档获取更多介绍. ...

网页部分重构（网易）

关于选择器：

关于边距：

关于浮动（float）：

网页部分重构（网易）相关推荐

最新文章

热门文章