pxcook使用（量尺寸）+盒子模型+残缺新浪导航栏

png用设计左侧尺子量尺寸，查颜色用吸管

psd用开发模式

盒子模型

盒子由内容区域content+内边距padding+边框border+外边距margin。

3.1边框（快捷键bd+tab）

border：1px solid red;

solid实线dashed虚线dotted点线

单向设置 border-left-right-top-bottom。

border会撑大盒子，width和height减去双倍border。

内减模式：box-sizeing:border-box; 不用计算盒子尺寸了。

去掉ul列表序号 ul｛list-style=none;｝

塌陷问题：给父元素加overflow：hidden;

改变行内标签上下位置用line-height;

书写顺序：从外到内，先宽高背景色，放内容，调节内容的位置，控制文字细节

<html>
<head>
<style>
.class1{height:40px;
background-color:#fcfcfc;
border-top:3px solid #ff8500;
border-bottom:1px solid #edeef0;}
.class1 a{
width:77px;
hegiht:40px;
text-align:center;
line-height:40px;
text-decoration:none;
display:inline-block;
font-size:11px;
}
.class1 a:hover{
color:#ff8400;
background-color:#edeef0;
}</style>
</head>
<body>
<div class="class1"><a href="#">设为首页</a><a href="#">手机新浪网</a><select><option>移动客户端</option><option><a href="#">新浪微博</a></option><option><a href="#">新浪新闻</a></option><option><a href="#">新浪财经</a></option></select>
</div></body>
</html>

pxcook使用（量尺寸）+盒子模型+残缺新浪导航栏相关推荐

CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
新浪导航栏(CSS)
效果: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
新浪导航案例-padding影响盒子好处
新浪导航案例-padding影响盒子好处效果如下: 代码如下: <!DOCTYPE html> <html lang="zh-CN"><head&g ...
新浪导航（html+css）
一. 主要应用padding内边距可以撑开盒子,对于字数不同的文字不需要设置不同宽度的盒子. 二.代码实现 <!DOCTYPE html> <html lang="en&q ...
前端菜鸟模仿新浪导航
大家可以去新浪网看看导航,前几天突然有这样的一个想法,所以就来撸一番代码.详细看代码. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
CSS / 三大特性+盒子模型+PS基础
目录 CSS的三大特性层叠性继承性优先级盒子模型边框 border 内边距 padding 外边距 margin PS测量 CSS的三大特性层叠性后来居上,相同选择器设置相同样式时,一个 ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...
【CSS】笔记3-三大样式、盒子模型、PS、圆角、阴影
目录一.三大特性 1.层叠性 2.继承性 3.优先级 4.CSS权重叠加二.盒子模型 1.盒子模型 (1)边框(border) (2)border-collapse表格细线边框 (3)边框会影响盒 ...
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...

pxcook使用（量尺寸）+盒子模型+残缺新浪导航栏

盒子模型

pxcook使用（量尺寸）+盒子模型+残缺新浪导航栏相关推荐

最新文章

热门文章