层叠样式表和标签应用

最新推荐文章于 2023-08-23 20:34:01 发布

北辰0518

最新推荐文章于 2023-08-23 20:34:01 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/beichen0518/article/details/79736142

版权

层叠样式表和标签应用

登录页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我是一个网站</title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<form action="" method="post">
			<fieldset class="myborder">
			<legend class="myborder">NEWSLETTER</legend>
			<span>Name：</span>
			<!--可以放置内容，行级元素-->
			<input type="text" name="username" class="content" required/>
			<span>Email：</span>
			<input type="email" name="useremail" class="content" required />
			<input type="submit" id="bottom" class="myborder" value="Subscibe"/>
			</fieldset>
		</form>
		
	</body>
</html>

body {
	width: 90%;
	margin: 0px auto;
	
}
#data {
	width: auto;
	margin: 200px auto;
	border-collapse: collapse;
	/*边框合并*/
	
}
#data th, td{
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
}
/*表示data表格下tr下的类样式*/
#data thead th {
	color: white;
	background-color: cornflowerblue;
}
#data tr.odd {
	background-color: lightblue;
}
#data tr.even {
	background-color: powderblue;
}
#data th.tl {
	border-top-left-radius: 10px;
}
#data th.tr {
	border-top-right-radius: 10px;
	border-right:none ;
}
#data td.tr {
	border-right:none ;
}
#data th {
	width: 200px;
	height: 50px;
}
#data tbody td {
	text-align: center;

}
#data tfoot th, #data tfoot td {
	text-align: center;
	border-bottom: none;
}

提示如果想去掉name框的输入框的外框，使用outline：none;

表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>WorldTime</title>
		<link rel="stylesheet" type="text/css" href="css/datatablec.css"/>
	</head>
	<body>
		<table id="data">
			<thead>
			<tr>
				<th class="tl"></th>
				<th>New York</th>
				<th>Chicago</th>
				<th class="tr">San Fancisco</th>
			</thead>
			<tbody>
			</tr>
			<tr class="odd">
				<th>A Poetic Perspective</th>
				<td>Sat</td>
				<td>Sat</td>
				<td class="tr">Sat</td>
			</tr>
			<tr class="even">
				<th>Walt Whitman at War</th>
				<td>Sat</td>
				<td>Sat</td>
				<td class="tr">Sat</td>
			</tr>
			<tr class="odd">
				<th>Found Poem &amp; Outsider Poetry</th>
				<td>Sat</td>
				<td>Sat</td>
				<td class="tr">Sat</td>
			</tr>
			</tbody>
			<tfoot>
			<tr class="even">
				<th>Natural Death: An Exploration</th>
				<td>Sat</td>
				<td>Sat</td>
				<td class="tr">Sat</td>
			</tr>
			</tfoot>
			
		</table>
	</body>
</html>

body {
	width: 90%;
	margin: 0px auto;
	
}
#data {
	width: auto;
	margin: 200px auto;
	border-collapse: collapse;
	/*边框合并*/
	
}
#data th, td{
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
}
/*表示data表格下tr下的类样式*/
#data thead th {
	color: white;
	background-color: cornflowerblue;
}
#data tr.odd {
	background-color: lightblue;
}
#data tr.even {
	background-color: powderblue;
}
#data th.tl {
	border-top-left-radius: 10px;
}
#data th.tr {
	border-top-right-radius: 10px;
	border-right:none ;
}
#data td.tr {
	border-right:none ;
}
#data th {
	width: 200px;
	height: 50px;
}
#data tbody td {
	text-align: center;

}
#data tfoot th, #data tfoot td {
	text-align: center;
	border-bottom: none;
}

定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			body {
				width: 80%;
				margin: 10px auto;
				border: 1px solid black;
			}
			p {
				font: 50px/100px "宋体";
			/*	强制不换行*/
				white-space: nowrap;
				/*超出部分隐藏*/
				overflow: hidden;
				/*超出部分省略号*/
				text-overflow: ellipsis;
			}
			.foo {
				/*相对定位 距离原来的左上角的距离*/
				position: relative;
				top: 350px;
				left: 100px;
			}
			.shit {
				/*绝对定位，相对于整个文档的左上角*/
				position: absolute;
				top: 50px;
				left: 100px;
			}
			#gao {
				/*固定定位,不会因为滚动条移动而消失,会一直在那个位置*/
				position: fixed;
				top: 100px;
				left: 100px;
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				font: 25px/30px "宋体";
			}
			#myblank {
				width: 100px;
				height: 100px;
				background-color: red;
				/*效果是隐藏没位置*/
				/*display: none;*/
				/*隐藏有位置*/
				/*visibility: hidden;*/
			}
		</style>
		
	</head>
	<body>
		<p class="shit">老师问：世界上有一种马，由黑白颜色组成，请问是什么马？小明：二维码！老师：滚出去.
			老师问：世界上有一种马，由黑白颜色组成，请问是什么马？小明：二维码！老师：滚出去</p>
		<p id="myblank"></p>
		<p class="foo">老师问：世界上有一种马，由黑白颜色组成，请问是什么马？小明：二维码！老师：滚出去.
			老师问：世界上有一种马，由黑白颜色组成，请问是什么马？小明：二维码！老师：滚出去</p>
		<p id="gao">我是一个广告，你关不掉我</p>
	</body>
</html>

浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				/*清除所有的边距*/
				margin: 0;
				/*行内间距*/
				padding: 0;
				
			}
			#one, #two, #three {
				width: 300px;
				height: 300px;
				/*脱离正常的文档流*/
				/*float: left;*/
				/*如果有重叠,保证有某个图形放在最上面可以用这个属性，值越大越上面*/
				position: absolute;
				z-index: 10;
				}
			#one {
				top: 50px;
				left: 50px;
				background-color: red;
			}
			#two {
				top: 100px;
				left: 100px;
				background-color: green;
				z-index: 20;
			}
			#three {
				top: 150px;
				left: 150px;
				background-color: blue;
			}
			#four {
				/*清除浮动恢复正常的文档流*/
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div id="four">hello</div>
	</body>
</html>

标准网页结构

标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/classsic.css"/>
	</head>
	<body>
		<div id="head">
			<h1>Logo</h1>
			<div id="anv">
				<ul>
					<li>
						<a href="">Home</a>
					</li>
					<li>
						<a href="">Products</a>
					</li>
					<li>
						<a href="">Services</a>
					</li>
					<li>
						<a href="">About</a>
					</li>
					<li>
						<a href="">Contact</a>
					</li>
				</ul>
			</div>
		</div>
		
		<div id="main">
			<div class="feature">Feature</div>
			<!--这一块应该是页面最主要的区域-->
			<div class="one">Column One</div>
			<div class="two">Column Two</div>
			<div class="three">Column Three</div>
		</div>
		<div id="foot">
			&copy;Copyright 2011
		</div>
	</body>
</html>

层叠样式表

* {
	margin: 0;
	padding: 0;
	font-family:Verdana, "宋体" ;
	
}
#head, #main, #foot {
	
	margin: 20px 0;
}
body {
	width: 960px;
	margin: 10px auto;
}
#head h1 {
	background-color: lawngreen;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 50px;
}
#anv {
	background-color: lightcyan;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
#anv ul li{
	width: 80px;
	display: inline-block;
	margin: 0 40px;
}
#anv ul {
	margin-top: 10px;

}
a {
	text-decoration: none;
}
a:link, a:visited, a:active {
	color: black;
}
#anv ul li:hover {
	border-bottom: 4px solid red;
}
#main .feature {
	height: 150px;
	line-height: 150px;
	text-align: center;
	background-color: lavender;
}
#main .one, .two, .three {
	text-align: center;
	width: 300px;
	height: 150px;
	line-height: 150px;
	float: left;
}
.one {
	margin: 10px 15px 0 0 ;
	background-color: lightgoldenrodyellow;
}
.two {
	margin: 10px 15px;
	background-color: lightblue;
}
.three {
	margin: 10px 0 0 15px;
	background-color: lightgreen;
}
#foot {
	clear: left;
	background-color: lightgray;
	height: 50px;
	text-align: center;
	line-height: 50px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>YOKO'S KITCHEN</title>
		<link rel="stylesheet" type="text/css" href="css/indexc.css"/>
	</head>
	<body>
		<div id="header">
			<h1><img src="img/header.jpg"/></h1>
			<ul>
				<li><a href="">home</a></li>
				<li><a href="">classes</a></li>
				<li><a href="">catering</a></li>
				<li><a href="">about</a></li>
				<li><a href="">contact</a></li>
			</ul>
		</div>
		<div id="main">
			<div class="gl">
			<div class="tw first">
				<div class="fl photo">
					<img src="img/bok-choi.jpg"/>
				</div>
				<div class="fl word">
				<h3>Japanese Vegetarian</h3>
				<h4>Five week course in London</h4>
				<p>A five week introduction to traditional Japanese vegetarian meals,teaching you a 
				selection of rice and noodles dishes.</p>
				</div>
				<p class="last_word">Bok Choi</p>
			</div>
			<div class="tw second">
				<div class="fl photo">
					<img src="img/teriyaki.jpg"/>
				</div>
				<div class="fl word">
				<h3 >Sauces Masterclass</h3>
				<h4>One day workshop</h4>
				<p>A five week introduction to traditional Japanese vegetarian meals,teaching you a 
				selection of rice and noodles dishes.</p>
				</div>
				<p class="last_word">Teriyaki Sauce</p>
			</div>
			</div>
			<div id="rg" class="gl third">
				<h3>Popular Repices</h3>
				<h4>Yakitori(grilled chicken)</h4>
				<h4>Tsukune(minced chicken patties)</h4>
				<h4>Okonomiyaki(savory pancakes)</h4>
				<h4>Mizutaki(chicken stew)</h4>
				<h3>Contact</h3>
				<p>Yoko's Kitchen 27 Redchurch Street Shoreditch London E27DP</p>
			</div>

		</div>
		
		<div id="footer">
			&copy;2011 YOKO's Kitchen
		</div>
		
	</body>
</html>

* {
	margin: 0;
	padding: 0;

	
}
body {
	
	background-image: url(../img/dark-wood.jpg);
}

#header h1 {
	width: 940px;
	height: 130px;
	margin: 0 auto;
	text-align: center;
}
#header ul {
	width: 940px;
	margin: 0 auto;
	background-image: url(../img/backdrop.gif);
}
#header ul li {
	font: border 16px/20px arial;

	margin-left: 30px;
	width: 70px;
	display: inline-block;
}
a {
	text-decoration: none;
}
a {
	color: white;
}
a:link, a:valid, a:active {
	color: black;
}
#main{
	background-color: white;
	width: 940px;
	margin: 0 auto;
}
#main p {
	font-size: 16px;
}

.fl {
	float: left;
}
#main .photo {
	margin: 10px 20px 0 20px;
}
#main .word {
	margin-top: 10px;
	width: 320px;
}
#main .tw{
	width: 660px;
}


#main .last_word {
	clear: left;
	margin-left: 20px;
	width: 300px;
	font-size: 16px;
}
#main .first {
	background-color: white;
}
#main .second {
	background-color: white;

	clear: left;
}
#main .third {
	border-left: 1px solid lightgrey;
	background-color: white;
	width: 279px;
	height: 452px;


}
#main .gl {
	float: left;
}
#footer {
	clear: left;
	width: 940px;
	margin: 0 auto;
	background-image: url(../img/backdrop.gif);
	
}
#main h4 {
	margin-top: 10px;
	margin-bottom: 10px;
	color: palevioletred;
}
#rg h3 {
	margin: 20px 20px;
	color: palevioletred;
}
#rg h4 {
	font-size: 16px;
	margin: 5px 20px;
	width: 80%;
	border-bottom: 1px solid lightgrey;
}
#rg p {
	width: 70%;
	margin-left: 20px;
}
#footer {
	font-size: 16px;
}

北辰0518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
层叠样式表和标签应用

层叠样式表和标签应用登录页面&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;我是一个网站&lt;/title&gt; &lt;link rel="stylesheet&q
复制链接

扫一扫