您的位置：首页 > Web前端

Web前端学习第十三天·fighting_HTML页面设计技巧总结（二）

2016-05-28 15:34 936 查看

[b]行级元素之间的空白距离[/b]

　　如下图所示：（看似是一张图，实际上是三张图分别放在<a>标签中实现，如果没有经过特殊的处理，那么图与图之间就会留有空隙，影响页面布局的效果）

　　

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>行级元素之间的空白距离</title>
<meta charset="utf-8" />
<style type="text/css">
a {
text-decoration:none;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="公共和个性化样式.html" />-->
</head>
<body>
<div id="deceng">
<a href="#">
<img src="../img/ch1.jpg"/>
</a>
<a href="#">
<img src="../img/ch2.jpg" />
</a>
<a href="#">
<img src="../img/ch3.jpg" />
</a>
</div>
</body>
</html>

运行结果：

　　此时需要把html文档中行级标签之间的距离都去掉，即将所有的<a>标签写在同一行中且之间没有距离即可。如下所示：

<body>
<div id="deceng">
<a href="#"><img src="../img/ch1.jpg"/></a><a href="#"><img src="../img/ch2.jpg" /></a><a href="#"><img src="../img/ch3.jpg" /></a>
</div>
</body>

　　之后三个图片之间的距离就没有了！这特么是在逗我玩啊……感觉这个笔记再更新下去的话我就要变成段子手了……

　　看评论区有好心人指正我，这里只要把“deceng”div的font-size设置为0就可以出现相同的效果。掌声在哪里，谢谢好心人指点~

[b]设定行级元素的尺寸[/b]

　　默认情况下，行级元素的宽度和高度都是自动的，那么有需要修改高度和宽度时应该怎么办？

　　有两种方式：1.使用display：block，变成块级元素；2.使用position：absolute绝对定位，设置绝对定位后默认的宽度和高度都是0，需要设定高度和宽度具体的值。一般情况下，设置行级元素width：100%和height：100%都没有效果，但是使用绝对定位后会有效果。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>设定行级元素的尺寸</title>
<meta charset="utf-8" />
<style type="text/css">
#baidu {
text-decoration:none;
width:100px;
height:50px;
display:block;
background-color:pink;
color:black;
}
#guge {
text-decoration:none;
width:100px;
height:50px;
background-color:pink;
color:black;
position:absolute ;
}
</style>
</head>
<body>
<ul>
<li>
<h3>方式一：设定display：block</h3>
<a id="baidu" href="#">百度</a>
</li>
<li>
<h3>方式二：设定position：absolute</h3>
<a id="guge" href="#">谷歌</a>
</li>
</ul>

</body>
</html>

运行结果：

[b]重点重点重点：position的定位[/b]

　　position：absolute 绝对定位（不设置left、top、right、bottom属性值时，以下规则没用，都是以父容器为参考进行绝对定位）

　　　　父容器为static布局：绝对定位以最近的非static父容器可视范围作为参照（如窗体的可视区作为参照）

　　　　父容器为非static布局：绝对定位以父容器作为参照

　　　　注意<html>也是盒子模型。

父容器是static布局，子元素是absolute布局的情况，示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>position的进一步研究</title>
<meta charset="utf-8" />
<style type="text/css">
html {
border:2px solid blue;
margin:20px 0 0 30px;
/*默认是static定位*/
}
body {
height:300px;
border:2px solid red;
/*默认是static定位*/
}
#abs1 {
position:absolute;
left:0;
bottom:0;
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<div id="abs1">

</div>
</body>
</html>

运行结果：

　　在此例中，div使用的是absolute定位，它的父容器body使用了static定位，而它的祖父元素html也使用了static定位，此时div将会以最近的非static容器（窗体）为参照进行绝对定位，于是出现上图所示的效果。

　　如果把该例中的html的定位方式设置为position：relative（非static方式），此时div就将会以最近的非static容器（html）为参照进行绝对定位，效果如下图所示：

父容器是非static布局（这里用relative），子元素是absolute布局的情况，示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>position的进一步研究</title>
<meta charset="utf-8" />
<style type="text/css">
html {
border:2px solid blue;
margin:20px 0 0 30px;
/*默认是static定位*/
/*position:relative;*/
}
body {
height:300px;
border:2px solid red;
/*默认是static定位*/
position:relative;
}
#abs1 {
position:absolute;
left:0;
bottom:0;
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<div id="abs1">

</div>
</body>
</html>

运行结果：

　　以上几个例子就说明了为什么在网页设计中父元素常常使用relative定位方式。

如果不设置left、top、right、bottom，元素脱离文档流并不会占位。（默认的文档流为：从左到右，从上到下）

作用：z-index可起到作用，width和height也起到作用。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>position的进一步研究</title>
<meta charset="utf-8" />
<style type="text/css">
html {
border:2px solid blue;
margin:20px 0 0 30px;
/*默认是static定位*/
/*position:relative;*/
}
body {
height:300px;
border:2px solid red;
/*默认是static定位*/
}
#abs1 {
position:absolute;
/*left:0;
bottom:0;*/
width:100%;
height:100px;
background-color:pink;
margin-left:20px;
}
</style>
</head>
<body>
<div id="abs1">

</div>
<div style="height:200px;background:green;z-index:2;">

</div>
</body>
</html>

运行结果为：

　　可以看到，绿色块起点与粉红色块起点一样都是在左上角，说明粉红色块并没有占位。

　　position：relative 总是以父容器作为参考点。

　　　　left和top值有效，right和bottom值无效。

　　　　不会脱离文档流，依然会占位。不管怎么移动，将元素移动到哪，该元素都始终占有高度指定的那一块区域。示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>position的进一步研究</title>
<meta charset="utf-8" />
<style type="text/css">
html {
border:2px solid blue;
margin:20px 0 0 30px;
/*默认是static定位*/
position:relative;
}
body {
height:300px;
border:2px solid red;
/*默认是static定位*/
}
#abs1 {
position:relative;
/*left:0;
bottom:0;*/
width:100px;
height:100px;
background-color:pink;
left:50px;
top:50px;
}
#second {
background-color:black;
height:60px;
}
</style>
</head>
<body>
<div id="abs1">

</div>
<div id="second">

</div>
</body>
</html>

运行结果如下：

[b]【[b]面试题[/b]】position设置后元素会不会脱离文档流？[/b]

　　分情况说明。

　　position：absolute绝对定位时，如果不设置left、top、right、bottom属性值的话，元素将会脱离文档流并不会占位。

　　position：relative相对定位时，无论设置还是不设置left、top、right、bottom属性值，元素都不会脱离文档流，都会占位。

[b]选项卡的设计与制作[/b]

　　例如：（京东首页，选中的部分顶部有红色条显示，动态控制样式需要使用js）

　　高能预警，我又要画图了……用画图板，还要写字呢！！！好害怕……所以啊，谁教教我ps吧（笑哭）

　　设计结构如下：a标签使用绝对定位，顶边框粗一点，底部没有，背景颜色是白色，a标签向覆盖div的红色边框。其他部分……看！！！！！图！！！！！/(ㄒoㄒ)/~~

　　我自己看着都想笑……

　　是不是感觉自己又能上天了！

　　我猜是的。

　　示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>选项卡的设计与制作</title>
<meta charset="utf-8" />
<style type="text/css">
ul, li {
margin:0;
padding:0;
list-style:none;
}
a {
text-decoration:none;
font:400 12px/12px 宋体;
color:black;
}
#xuanxiangka {
border-bottom:1px solid #c81623;
height:35px;
}
#xuanxiangka .title li {
float:left;/*浮动会导致父容器ul和div高度为0，需要给父容器设定高度才可以显示出border-bottom的效果*/
width:85px;
height:35px;
line-height:35px;
text-align:center;
position:relative;
z-index:3;
}
/*分割线的设计*/
#xuanxiangka .title li span {
width:1px;
background-color:gray;
overflow:hidden;
display:block;/*因为span是行级标签，要使设置的width属性有效，需要使其变为块级标签显示*/
position:absolute;
right:0;
top:10px;
height:18px;
}
/*ul边框的设计*/
#xuanxiangka .title {
border:1px solid gray;
height:35px;
border-bottom:none;
margin-left:500px;
}
/*选中的a标签样式的设计*/
#xuanxiangka .title .title-selected a {
border:1px solid #c81623;
display:block;/*将行级元素变成块级元素才能设定它的宽度和高度*/
width:86px;
height:33px;
line-height:35px;
text-align:center;
border-top:3px solid #c81623;
z-index:5;/*li标签赋值为3，为了覆盖掉下面的红色线条*/
position:absolute;
top:-1px;
left:-1px;/*向左移动1px，覆盖掉左边边框*/
background-color:white;
border-bottom:none;/*底部边框超出红色底线1px，去掉底部边框，设置背景色为白色，就把原来的红色线条覆盖了*/
}
</style>
</head>
<body>
<div id="xuanxiangka">
<ul class="title">
<li class="title-item title-selected"><a href="javascript:void(0)">大牌</a><span>a</span></li>
<li class="title-item"><a href="javascript:void(0)">男装</a><span>a</span></li>
<li class="title-item"><a href="javascript:void(0)">女装</a><span>a</span></li>
<li class="title-item"><a href="javascript:void(0)">鞋靴</a><span>a</span></li>
<li class="title-item"><a href="javascript:void(0)">箱包</a><span>a</span></li>
<li class="title-item title-selected"><a href="javascript:void(0)">内衣配饰</a><span>a</span></li>
<li class="title-item"><a href="javascript:void(0)">珠宝首饰</a><span>a</span></li>
<li class="title-item"><a href="javascript:void(0)">奢品礼品</a><span>a</span></li>
<li class="title-item"><a href="javascript:void(0)">奢华腕表</a><span>a</span></li>
</ul>
</div>
</body>
</html>

运行结果：

[b]使用伪类样式实现动态效果[/b]

　　:hover 鼠标悬浮，改变背景颜色

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hover鼠标悬浮样式的设置</title>
<meta charset="utf-8" />
<style type="text/css">
ul {
list-style:none;
}
li {
height:28px;
line-height:28px;
}
li:hover {
background-color:orange;
color:white;
display:block;
height:50px;
line-height:50px;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</body>
</html>

运行结果：

　　transform与transition搭配使用（去看文档！！！）

　　　　transform 过渡转换的过程（即以什么样的方式进行转换，比如说旋转，翻转，上下移动这种样式）。

　　　　transition 过渡效果（比如说从一个ppt页到另一页的过渡方式的选择，嗯，就是这个意思……）

向下移动的效果-示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移动的测试</title>
<meta charset="utf-8" />
<style type="text/css">
#d1 {
background-color: pink;
height: 200px;
width: 1300px;
position: relative;
border: 2px solid red;
overflow: hidden;
}
#d1 #img {
position: absolute;
left: -100px;
/*第一个参数是要过渡的样式
第二个参数是要过渡的时间
第三个参数是过渡的方式（线性的，平滑的还有各种的）
第四个参数是开始这种过渡的时间*/
transition:transform 5s linear 0s;
}
#d1:hover #img {
transform:translateX(1200px);/*延x轴移动1200px，只是有了移动的样式，并不能看见移动的过程，想要看见移动的过程需要配合transition一起使用*/
}

#d2 {
background-color: pink;
border: 2px solid red;
width: 55px;
height: 200px;
position: relative;
overflow: hidden;
}
#d2 #loz {
font-style: normal;
font: 600 100px/100px Consolas;
position: absolute;
top: -52px;
transition:transform 1s ease 0s;
}
/*鼠标悬浮在d2层上时做效果，对loz菱形做效果*/
#d2:hover #loz {
/*还可以选取其他的效果*/
transform: translateY(190px);/*延y轴移动190px，只是有了移动的样式，并不能看见移动的过程，想要看见移动的过程需要配合transition一起使用*/
}
</style>
</head>
<body>
<div id="d1">
<i id="img">
<img src="../img/boy1.jpg" />
</i>
</div>
<br />
<br />
<div id="d2">
<i id="loz">◊</i>
</div>
</body>
</html>

运行结果：

初始时（移动前）

移动过程中的样子（我不能做一个gif或者小视频放上来a，但是效果还是hin炫酷的！帅哥在移动，关键是鼠标移出后，他还会自己回去！哈哈哈哈哈，有做男朋友的潜质！！！）

鼓掌！我要开始学JS啦！！！认真起来我自己都害怕哈哈哈！！！！！

　　

　　　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航