您的位置：首页 > Web前端 > CSS

个人简介 - HTML/CSS简单页面实例

2016-07-26 17:13 609 查看

用 div + css 控制页面

1.position属性：

absolute（绝对定位）：参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT（下面简称TRBL）进行定位。

在没有设定TRBL，默认依据父级的做标原始点为原始点。

如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

relative（相对定位）：是相对于前面的容器定位的。其层叠通过z-index属性定义。

相对于其最接近的一个参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位。

当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

fixed（固定定位）

表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化

2.margin属性：元素的外边距

有margin-top，margin-right，margin-bottom，margin-left（上，右，下，左）四个方向

margin *同时设置四个外边距

margin **分别设定上下，左右外边距

margin *** 分别设定上，左右，下外边距

margin ****分别设定上，右，下，左外边距（顺时针方向）

3.border-radius：圆角半径
先编辑好一个div块，在.demo里面添加代码：

<div class="demo"></div>
.demo{
width:150px;
height:80px;
border:2px solid #f36;
background:#CCC;
}

border-radius只有一个值，四个角具有相同的圆角设置《上，下两个效果等价》

<pre name="code" class="html">.demo{
border-radius: 10px;
}

.demo{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

效果：

设置两个值，此时top-left等于bottom-right并且他们取第一个值；
top-right等于bottom-left并且他们取第二个值，也就是说元素左上角和右下角相同，右上角和左下角相同

.demo{
border-radius: 10px 20px;
}
.demo{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}

效果：

“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL（上右下左）的顺序原则。代码如下：

.demo{
border-radius: 10px 15px 20px 30px / 20px 30px 15px;
}

.demo{
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}

效果：

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="0009.css">
<title>界面</title>

</head>
<body>

<div class="con">
<div class="wra">
<div class="head">
<div class="head_na">
<div class="head_title">
不怀旧，正青春
</div>
<div class="head_nav">
<ul>
<li><a href = "#">首页</a></li>
<li><a href = "#">职业</a></li>
<li><a href = "#">技术</a></li>
<li><a href = "#">VIP</a></li>
</ul>
</div>
<div class = "head_img">
<img src="images/bd.png">
</div>
<div class="head_sop">
<form>
<input type="text">
</form>
</div>
</div>
</div>
<div class="body">
</div>
</div>
<div class="foot">
沉默是害怕的借口，傻笑是委屈的理由。
</div>
</div>
</body>
</html>

CSS样式

*
{
margin: 0px;
padding: 0px;

}

body
{
background-color: aliceblue;
}

.wra
{
width: 80%;
height: 1000px;
background-color: aqua;
margin: 0px auto;
}

.head
{
width: 100%;
height: 90px;
background-color: azure;
margin: 0px auto 0px;
}

.head_na
{
padding-bottom: 30px;
padding-top: 30px;
width: 100%;
height: 30px;
position: relative;/* 相对定位。具体请看下面解析 */
}

.head_title
{
float: left;
font-family: sans-serif;
font-size: 30px;
color: antiquewhite;
}

ul
{
margin-left: 40px;
float: left;          /* 向左浮动 */
list-style-type: none;/* 去掉无序列表前面的点 */
padding-top: 6px;
padding-bottom: 6px;
}

li
{
padding-left: 10px;
display: inline;  /* 转换为内联标签《在一行显示，没有宽高属性》 */
}

a:link,a:visited      /* 初次加载，点击过后 */
{
font-weight: bold;
color: darkgray;
text-align: center;
padding: 6px;
text-decoration: none;/* 去掉下划线 */
}

a:hover,a:active /* 鼠标在超链接上，点击超链接时 */
{
color: dimgray;
}

.head_img img /* 直接指定img，对其设置样式 */
{
border-radius: 30px; /* 四个角具有相同的圆角半径 */
display: inline;
width: 26px;
height: 26px;
box-shadow: 0 1px 1px rgba(0 0 0 0.3); /* [投影方式，向内<inset>] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 颜色 */
float: right;
}

.head_sop
{
float: right;
width: 100px;
height: 26px;
position: relative;
margin-right: 50px;
}

form input
{
height: 23px;
border-radius: 30px;
}

.foot
{
padding-top: 10px;
text-align: center;
font-size: 10px;
color: darkgray;
}

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

标签： margin position border-radius css

相关文章推荐

新的分享

章节导航