css属性:
布局常用法人样式属性:
- width 设置元素(标签)的宽度,如 :width:100px;
- height 设置元素(标签)的高度,如:height:200px;
- background:设置元素背景色或背景图片,如background:gold;射着元素背景色为金色
- border 设置元素苏州的边框,如:border:1px solid black;设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法,分别设置四个边的: - border-top 设置顶边边框,如:border-top:10px solid red;
- border-left 设置左边边框,如:border-left:10px solid blue;
- border-right 设置右边边框,如:border-right:10px solid green;
- border-bottom 设置底边边框,如:border-bottom:10px solid pink;
- padding 设置元素包含的内容和元素边框的距离,也叫内边距,如padding:20px;padding是同时设置4个边的,也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
- margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom
- float 设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left; 右浮动:float:right;
文本常用样式属性:
-
color 设置文字的颜色,如: color:red;
-
font-size 设置文字的大小,如:font-size:12px;
-
font-family 设置文字的字体,如:font-family:‘微软雅黑’;为了避免中文字不兼容,一般写成:font-family:‘Microsoft Yahei’;
-
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
-
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
-
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
-
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px;
overflow的设置项:
1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
css显示特性
display属性是用来设置元素的类型及隐藏的,常用的属性有:
1、none 元素隐藏且不占位置
2、inline 元素以行内元素显示
3、block 元素以块元素显示
表格元素及相关样式
1、
标签:声明一个表格2、标签:定义表格中的一行
3、和标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格
表格相关样式属性
- border-collapse 设置表格的边线合并,如:border-collapse:collapse;
定位
-
relative 生成相对定位元素,一般是将父级设置相对定位,子级设置绝对定位,子级就以父级作为参照来定位,否则子级相对于body来定位。
-
absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
-
fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级
css权重
权重的等级
可以把样式的应用方式分为几个等级,按照等级来计算权重
1、内联样式,如:style=””,权重值为1000
2、ID选择器,如:#content,权重值为100
3、类,伪类,如:.content、:hover 权重值为10
4、标签选择器,如:div、p 权重值为1
前端页面开发流程
1、创建项目目录
一般先创建一个总目录,然后在此目录中创建images、css、js三个目录,三个目录中分别放图片、css文件以及js文件。
2、切图
通过photoshop对网页效果图进行切图,所使用图片需要是带图层的psd格式。
3、新建html文件,新建css文件
4、编写html和css代码
index.hrml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选股系统</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="header_con">
<div class="header">
<a href="#" class="logo">选股系统</a>
<ul class="mainmenu">
<li><a href="#">股票信息</a></li>
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</body>
</html>
main.css文件
body{
margin:0px;
}
.header_con{
width:100%;
height:50px;
background:#222;
}
.header{
width:1170px;
height:50px;
margin:0px auto;
}
.logo{
float:left;
width:100px;
height:50px;
font-size:18px;
color:#979695;
line-height:50px;
text-decoration:none;
text-align:center;
}
.mainmenu{
float: left;
margin:0px;
padding:0px;
list-style:none;
width:172px;
height:50px;
}
.mainmenu li{
width:86px;
height:50px;
float:left;
text-align:center;
}
.mainmenu a{
color:#979695;
font-size:14px;
text-decoration:none;
line-height:50px;
}