zoukankan html css js c++ java

20180205文本`边框`背景`超链接（css伪类）`列表样式，div标签

文本样式：

而文本样式主要涉及多个文字的排版效果，即整个段落的排版效果。字体样式注重个体，文本样式注重整体。使用了font前缀和text前缀来区分两类不同。

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
text-indent	段落首行缩进
text-align	文本水平对齐方式
line-height	行高

（1）text-decoration属性

none	默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline	下划线
line-through	删除线
overline	顶划线

边框图示：

要定义一个元素的边框必须要设置以下三个方面。

(1)边框的宽度

(2)边框的外观(实线，或者虚线)

(3)边框的颜色

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

（1）border-width

在CSS入门学习中，我们都是建议采用像素做单位。

（2）border-style

属性值	说明
none	无样式
hidden	与"none"相同。不过应用于表除外。对于表，hidden用于解决边框冲突
solid	实线
dashed	虚线
dotted	点线
double	双线，双线的宽度等于border-width值

（3）border-color

属性用来定义边框的颜色。

（4）简洁写法

border- 1px;

border-style: solid;

border-color: red;

可以简写为：border:1px solid red;

（5）局部边框样式

border-top: ;

border-bottom: ;

border-left: ;

border-right:

背景样式：

属性	说明
background-color	背景颜色
background-image	定义背景图像的路径，这样图片才能显示
background-repeat	显示方式，例如纵向平铺、横向平铺
background-attachment	是否随内容而滚动(了解)

background-repeat属性取值

属性值	说明
no-repeat	表示不平铺
repeat	同时平铺
repeat-x	水平方向(x轴)平铺
repeat-y	垂直方向(y轴)平铺

超链接样式：

不同时期不同样式

属性	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过显示的样式
a:active	定义鼠标单击激活时的样式

定义这4个伪类，必须按照(link、visited、hover、active)LVHA的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变!

列表样式：

列表项符号list-style-type

1.有序列表

语法:

<li>有序列表项</1i>

<1i>有序列表项</1i>

</ol>

属性值	序号类型
1	数字1、2、3
a	小写英文字母a、b、..
A	大写英文字母A、B、..
i	小写罗马数字i、ii、
I	大写罗马数字I、I I、…

2.无序列表

语法:

<li>有序列表项</1i>

<1i>有序列表项</1i>

</ul>

属性值	序号类型
disc	实心圆●
circle	空心圆○
square	实心方块■

我们用css样式：

list-style-type属性取值

属性值	序号类型
decimal	数字1、2、3
lower-alpha	小写英文字母a、b、..
upper-alpha	大写英文字母A、B、..
lower-roman	小写罗马数字i、ii、
upper-roman	大写罗马数字I、I I、…

属性值	序号类型
disc	实心圆●
circle	空心圆○
square	实心方块■
none	取出符号

边框 ·背景样式练习：

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>边框</title>
  6 <style>
  7 #p1{
  8 border-width: 10px;
  9 border-style: dashed;
 10 border-color: red;
 11 background-color: #B13335
 12 }
 13 #p2{
 14 border: 1px solid blue; 
 15 background-color: #B72D30
 16 }
 17 #p3{
 18 border-bottom: 1px dashed #967777;
 19 border-left: 1px solid #238A82;    
 20 border-right: 1px double #D06F71; 
 21 border-top: 1px dotted #4C8F5C;
 22 background-image:url(img/logo3.jpg);
 23 background-repeat:repeat;
 24 background-attachment: fixed;
 25 
 26 }
 27 body{
 28 background-image: url(logo3.jpg);
 29 background-repeat:no-repeat;
 30 background-attachment: fixed;
 31 }
 32 </style>
 33 </head>
 34 
 35 <body>
 36 <p id="p1">离离原上草，一岁一枯荣</p><br>
 37 
 38 <p id="p2">野火烧不尽，春风吹又生</p><br>
 39 
 40 <p id="p3">床前明月光，疑是地上霜</p>
 41 <br>
 42 <br>
 43 <br>
 44 <br>
 45 <br>
 46 <br>
 47 <br>    
 48 <br>
 49 <br>
 50 <br>
 51 <br>
 52 <br>
 53 <br>
 54 <br>
 55 <br>
 56 <br>
 57 <br>
 58 <br>
 59 <br>
 60 <br>
 61 <br>
 62 <br>    
 63 <br>
 64 <br>
 65 <br>
 66 <br>
 67 <br>
 68 <br>
 69 <br>
 70 <br>
 71 <br>
 72 <br>
 73 <br>
 74 <br>
 75 <br><br>
 76 <br>
 77 <br>    
 78 <br>
 79 <br>
 80 <br>
 81 <br>
 82 <br>
 83 <br>
 84 <br>
 85 <br>
 86 <br>
 87 <br>
 88 <br>
 89 <br>
 90 <br><br>
 91 <br>
 92 <br>    
 93 <br>
 94 <br>
 95 <br>
 96 <br>
 97 <br>
 98 <br>
 99 <br>
100 <br>
101 <br>
102 <br>
103 <br>
104 <br>
105 <br><br>
106 <br>
107 <br>    
108 <br>
109 <br>
110 <br>
111 <br>
112 <br>
113 <br>
114 <br>
115 <br>
116 <br>
117 <br>
118 <br>
119 <br>
120 <br>
121 <br>
122 
123 </body>
124 </html>

背景样式-练习（网易）1：

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <link rel="stylesheet" href="style5.css">
  7 
  8 <style>
  9 
 10 #username{
 11 background-image: url(bg_v3.png);
 12 background-position: -148px -63px;
 13 }
 14 #pwd{background-image: url(bg_v3.png);
 15 background-position: -170px -63px;
 16 }
 17 #login{background-image: url(bg_v3.png);
 18 background-position: -306px -214px;
 19 }
 20 #regist{background-image: url(bg_v3.png);
 21 background-position: -125px -217px;
 22 }
 23 
 24  
 25 
 26 </style>
 27 </head>
 28 
 29 <body>
 30 <form action="">
 31 用户名：<input type="text" id="username"><br>
 32 密码：<input type="text" id="pwd"><br>
 33 <input type="button" value="登录" id="login">
 34 <input type="button" value="去注册" id="regist">
 35 </form>
 36 </body>
 37 </html>
 38 
 39 div标签-练习：
 40 
 41 <!doctype html>
 42 <html>
 43 <head>
 44 <meta charset="utf-8">
 45 <title>div</title>
 46 <link rel="stylesheet" href="divstyle.css">
 47 
 48 <style>
 49 
 50 @charset "utf-8";
 51 /* CSS Document */
 52 
 53 #d1{
 54 width: 250px;    
 55 height: 40px;
 56 border: 1px solid #8A7F7F;
 57 
 58 }
 59 #d2{
 60 width: 20px;
 61 height: 35px;
 62 background: url(bg_v3.png)-151px -52px;
 63 
 64 float: left
 65 
 66 }
 67 #d3{width: 100px;
 68 height: 35px;
 69 float: left;
 70 
 71 
 72 }
 73 #username{
 74 height: 30px;
 75 border-style: none;
 76 }
 77 #d10{
 78 width: 80px;
 79 height: 35px;
 80 background: url(bg_v3.png) -6px -108px ;
 81 
 82 float: right
 83 
 84 
 85 }
 86 
 87 #d4{
 88 width: 250px;    
 89 height: 40px;
 90 border: 1px solid #8A7F7F;
 91 
 92 }
 93 #d5{
 94 width: 20px;
 95 height: 35px;
 96 
 97 background-image: url(bg_v3.png);
 98 background-position: -175px -52px;
 99 float: left
100 
101 }
102 #d6{width: 100px;
103 height: 35px;
104 float: left
105 }
106 #username1{
107 height: 30px;
108 border-style: none;
109 }
110 #d7{width: 10px;
111 height: 10px;
112 }
113 #d8{background-image: url(bg_v3.png);
114 background-position: -306px -214px;
115 }
116 #d9{background-image: url(bg_v3.png);
117 background-position: -125px -217px;
118 }
119 #d11{border-style: none;
120 width: 80px;
121 
122 }
123 
124  
125 
126  
127 
128 </style>
129 
130 
131 </head>
132 
133 <body>
134 <form action="">
135 <div id="d1">
136 <div id="d2"></div>
137 <div id="d3"><input type="text" id="username" placeholder="邮箱账号或手机号"></div>    
138 <div id="d10"></div>
139 </div>
140 <div id="d4">
141 <div id="d5"></div>
142 <div id="d6"><input type="password" id="username1" placeholder="密码"></div>    
143 </div>
144 <input type="radio" id="d7">十天内免登录 忘记密码？<br>
145 
146 <input type="button" value="登录" id="d8">
147 <input type="button" value="去注册" id="d9"><br>
148 
149 <span>版本：</span><select name="" id="d11">
150 <option selected value="">默认版本</option>
151 <option value="">网易邮箱6.0版</option>
152 <option value="">网易邮箱6.0简约版</option>
153 </select>
154 <input type="radio">全程ssl
155 
156 
157 </form>
158 </body>
159 </html>

超链接样式-练习：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <link rel="stylesheet" href="style6.css">
 7 
 8 <style>
 9 
10 #a1:link{
11 color: #C5BEBF;
12 text-decoration: none;
13 }
14 /*鼠标悬停的样式*/
15 #a1:hover{
16 color: red;
17 }
18 /*鼠标点击时的样式*/
19 #a1:active{
20 color: blue;
21 }
22 /*鼠标松开（访问过的样式）*/
23 #a1:visited{
24 color: pink;
25 }
26 #p1:hover{
27 color: pink;
28 }
29 
30 </style>
31 </head>
32 
33 <body>
34 <a href="#" id="a1">超链接1</a>
35 <a href="#" id="a2">超链接2</a>
36 <a href="#" id="a3">超链接3</a>
37 <p id="p1">p标签</p>
38 </body>
39 </html>
40 
41 列表样式-练习：
42 
43 <!doctype html>
44 <html>
45 <head>
46 <meta charset="utf-8">
47 <title>无标题文档</title>
48 <link rel="stylesheet" href="style7.css">
49 
50 <style>
51 
52 #o1{list-style-type: none;
53 list-style-image: url(img/sp.png)
54 }
55 
56  
57 
58 </style>
59 </head>
60 
61 <body>
62 <ol id="o1">
63 <li>数学</li>
64 <li>语文</li>
65 <li>英语</li>
66 </ol>
67 </body>
68 </html>

查看全文

相关阅读:
ibatis项目启动报错The string "--" is not permitted within comments【原】
excel vlookup简易样例【原】
用itext合并多个pdf文件【转】【补】
springboot 自定义starter之AutoConfiguration【原】
springboot 启动配置原理【转】【补】
springboot 数据访问【转】【补】
springboot thymeleaf【转】【补】
包名的命名方式
 servlet中doget和dopost方法的区别
 DBUtils使用详细示例

原文地址：https://www.cnblogs.com/wangnatian/p/8417786.html