html与css的合集
⼀、<--table集⼤成-->
/*⾸先对table进⾏css样式*/
<title></title>
<style>
table{
border:1px solid lightskyblue;
border-spacing:0px;
border-collapse:collapse; /*table标签的三个重要标签属性值：
1.border: 边框线宽 边框线型 边框线颜⾊
2.border-sapcing:0px可以消除边框线间隙
3.border-collapse:collapse可以使边框线重合但不会变得更宽 */
}
th,td{
border:1px solid lightskyblue;
}
</style>
</head>
<body>
<table>
<tr>
<th>序号</th><th>姓名</th><th>⼿机号</th><th>家庭地址</th>
</tr>
<tr>
html网页设计css<td>1</td><td colspan="2" >Jim</td><td rowspan="3" >郑州市⾼新区派出所</td>
</tr>
<tr>
<td>2</td><td>Tom</td><td>119</td>
</tr>
<tr>
<td>3</td><td>Lucy</td><td>120</td>
</tr>
</table>
</body>
/*其中有两个构建表格的重要标签属性：
eg：<tr>
<td rowspan="2">图书分类</td><td colspan="2" >⼀季度</td>
</tr>
*/
<!--复选框-->
格式：<input type="checkbox" name=" " id=" "><label for“名字的英⽂”>名字的英⽂</lable>
要点 标记属性name的作⽤是将⼀系列的的复选框统⼀归类 label for表⽰其⽬标是该英⽂名字 label是双标签；
<input type="checkbox" name="hobby" id="zuqiou"><label for="zuqiou">⾜球</label>
<input type="checkbox" name="hobby" id="pingpang"><label for="pingpang">乒乓球球</label>
<input type="checkbox" name="hobby" id="lanqiou"><label for="lanqiou">篮球</label>
<!--按钮-->
<input type="button" value="登陆"/>
⼆、/*css样式属性*/
<!--
eg. text-align:center;
css声明 css样式属性：css样式属性值；
样式属性值如果有空格，则必须单引号或双引号引起来；
-->
<!--
css定义存在的位置：
1.style标记属性
2.style标签中
3.css⽂件中，使⽤link标签引⼊html
-->
常⽤css样式属性：
1.border：边框线宽 边框线型 边框线颜⾊ ;
<-decoration:none; /*多⽤于a标签中，去除超链接的下划线* / （text-decoration: ; 为⽂本施加⼀些效果）
<-align:center/right/left;/*将⽂本居中/居右居左*/
<-indent:***px;/*调节边框中的内容与边框的距离*/
5.关于字体：font-style:italic; font-weight:bold; font-size:**px; font-family：华⽂彩云；
（注意：当省略font标记属性时，要按⼀定的顺序 eg: font:italic bold **px 华⽂彩云）
6.cursor:pointer;/*当⿏标箭头指到该标签所形成的区域时，在所属标签上的箭头变为⼩⼿*/
7.display :block/inline/inline-block; /*将所属标签的元素类型转变为该display后的类型*/ （优势：可以将⼀些⾏内元素⽆法适⽤的css样式属性⽤到⾏内元素上）
8.width:**px;/*调节线框的⼤⼩*/
9.height:n px；与line-height:n px；连⽤可以使线框⾥的内容居中.(即height的数值与line-height的值相相等即看实现该效果)
10.background-color: ;(线框⾥的背景被该颜⾊填充)。
11.letter-spacing:**px;(调节字与字的间距)
三、<--选择器集合-->
1.标签选择器：使⽤标签的名称即可 。
span{
background-color:red;
}
2.类选择器：⾸先在⽬标标签中⽤class标签属性定义类选择器的名称，然后在头部style标签中以“.名称”的形式引出即可。
<title></title>
<style>
.text-center{
text-align:center;
}
</style>
</head>
<body>
<div class="text-center">郑州⼤学</div>
</body>
3.id选择器：⾸先在⽬标标签中⽤id标签属性定义id选择器的名称，然后在头部style标签中以“#名称”的形式引出即可。
<title></title>
<style>
#text-center{
text-align:center;
}
</style>
</head>
<body>
<div id="text-center">郑州⼤学</div>
</body>
4.分组选择器：由⼀组选择器构成的选择器 中间由“，”隔开 。
<style>
.s1,#p1{
color:lightskyblue;
}
</style>
</head>
<body>
<span class="s1">河南省</span>
<p id="p1">⼯业⼤学 </p>
5.⽗⼦选择器：由标签的⽗⼦关系(从属关系)构成的⼀组选择器，标签之间⽤“空格隔开”./*注意从属关系不能搞反*/
<style>
html body span{
font-size:14px;
}
</style>
</head>
<span class="s1">河南省</span>
6.通配符选择器：对整个所有的标签都起作⽤.（以*的形式引出）
<style>
*{
font-family：华⽂楷体;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<span class="s1">河南省</span>
</body>
<--框架组合-->
step:1.先分析整个框架分⼏个层次，有⼏个层次就⽤⼏个<frameset></frameset>双标签。同时可以对其使⽤rows/cols标签属性对⼤局进⾏分割。
2.然后使⽤<frame />单标签对各层次进⾏构架。
3.最后依据分割的部分，建⽴相应的html的⽂件。
4.最后便可以按照⾃⼰的想法进⾏构建了。
（注意：<frameset></frameset>双标签是⼤框架，⼤框架之中依然可以使⽤<frameset></frameset>双标签）
<frameset rows="20%,80%"> <!--外框架⽤frameset 标记属性按⾏分块rows 标记属性-->
<frame src="top.html" /> <!---->
<frameset cols="30%,*">
<frame src="left.html" />
<frame src="right.html" name="right"/> （name标签属性可以为a标签提供⽬标层次，并在⽬标层次⾥打开）
</frameset>
{rows=“20%，80%”表⽰按⾏分成两层，上层占20%，下层占80%。
cols=“20%，80%"表⽰按列分两列，左列占20%，右列占80%。
src="html⽂件的名字"}
【
<a href="www.baidu" target="right">百度</a>
<frame src="right.html" name="right"/>
】
<--浮动-->
<style>
span{
border:1px solid red;
}
#d:after{
display:block;
content:""; /*#d:after 意为着在div标签中的内容后加content:""的内容*/
clear:left;
}
.s{
float:left;
}
div{
border:1px solid black;
}
</style>
<div id="d">
<span class="s">B</span>
<span class="s">B</span>
</div>
【
重点 ：1.加浮动
⽤css属性：float:left/right/center；
2.去浮动 （对象：所在的最外部的div标签）<⼩技巧：在最外不的div标签中使⽤类选择器/id选择器>
⽤css样式属性：#/.d:after{ <；注意":after"的使⽤，这是去除浮动的标志 除此以外css样式属性值体内的css样式属性值display：block；和content：“”；是必须/备的>
display:block;
content:""; /*#d:after 意为着在div标签中的内容后加content:""的内容，然后去除浮动*/
clear:left;
}
】
<--position-->
1.position：fixed；使作⽤对象/标签t脱离⽂档流，固定在body⾯上的某⼀地⽅，并且随页⾯的滚动不会发⽣移动。
2.position:relative; 使作⽤对象/标签相对于⾃⼰原来的位置发⽣移位，且会随页⾯的滚动发⽣移动。
3.position：absolute; 使作⽤对象脱离⽂档流，相对于position为⾮static/fixed的⽗标记⽽发⽣移动。（这意味着必须存在position是⾮static/fixed的⽗标记）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论