CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端

女爷i 2024-02-20 11:40 48阅读 0赞

>     <!DOCTYPE html>
>     
>     <html lang="en" id="myHtml">
>     	<head>
>     		
>     		<meta charset="UTF-8">
>     		<meta name="viewport" content="width=device-width, initial-scale=1.0">
>     		<title>HtmlAll</title>
>     		
>     		<link rel="stylesheet" type="text/css" href="css.css"/>
>     		<style type="text/css">
>     			/* 这是css的语言注释 */
>     			/* id选择器,写法#后面加ID然后大括号 */
>     			#usernameError{
>     				font-size: 30px;
>     				color: red;
>     			}
>     			/* 标签选择器,这个作用范围比较广,他会对当前页面的所有该标签生效 */
>     			div{
>     				background-color: black;
>     				border: 1px solid red;
>     				width: 100px;
>     				height: 100px;
>     			}
>     			/* 类选择器,.后面类名大括号 */
>     			/* 这种方式所有是这个class都可以使用到这个效果,优点是我们可以实现跨标签 */
>     			/* 这种所有标签都可以,这要class信息一样即可 */
>     			.myClass{
>     				border: red 1px solid;
>     				width: 80px;
>     				height: 30px;
>     			}
>     		</style>
>     	</head>
>     	<body>
>     		
>     		<div style="width: 300px; height: 300px; background-color: #CCFFFF;
>     		 display: block; border-color: red; border-width: 1px; border-style: solid;"></div>
>     		
>     		
>     		<div style="width: 300px; height: 300px; background-color: #CCFFFF;
>     		 display: block; border: black 1px solid;"></div>
>     		
>     		<span id="usernameError">对不起,用户名不能为空</span>
>     		<div></div>
>     		<div></div>
>     		<input type="text" class="myClass"/>
>     		<select class="myClass">
>     			<option>专科</option>
>     			<option>本科</option>
>     			<option selected>研究生</option>
>     			<option>硕士</option>
>     		</select>
>     		<a href="http://www.baidu.com">百度一下</a>
>     		<span id="baiDuSpan">点击我链接到百度</span>
>     		<ul>
>     			<li>中国
>     				<ul>
>     					<li>北京</li>
>     					<li>上海</li>
>     					<li>广州</li>
>     				</ul>
>     			</li>
>     			<li>美国</li>
>     			<li>俄国</li>
>     		</ul>
>     		<div id="div1">
>     			
>     		</div>
>     	</body>
>     </html>
> 
> <!DOCTYPE html>  
>   
> <html lang="en" id="myHtml">  
> <head>  
>   
> <meta charset="UTF-8">  
> <meta name="viewport" content="width=device-width, initial-scale=1.0">  
> <title>HtmlAll</title>  
>   
> <link rel="stylesheet" type="text/css" href="css.css"/>  
> <style type="text/css">  
> /\* 这是css的语言注释 \*/  
> /\* id选择器,写法\#后面加ID然后大括号 \*/  
> \#usernameError\{  
> font-size: 30px;  
> color: red;  
> \}  
> /\* 标签选择器,这个作用范围比较广,他会对当前页面的所有该标签生效 \*/  
> div\{  
> background-color: black;  
> border: 1px solid red;  
> width: 100px;  
> height: 100px;  
> \}  
> /\* 类选择器,.后面类名大括号 \*/  
> /\* 这种方式所有是这个class都可以使用到这个效果,优点是我们可以实现跨标签 \*/  
> /\* 这种所有标签都可以,这要class信息一样即可 \*/  
> .myClass\{  
> border: red 1px solid;  
> width: 80px;  
> height: 30px;  
> \}  
> </style>  
> </head>  
> <body>  
>   
> <div style="width: 300px; height: 300px; background-color: \#CCFFFF;  
> display: block; border-color: red; border-width: 1px; border-style: solid;"></div>  
>   
>   
> <div style="width: 300px; height: 300px; background-color: \#CCFFFF;  
> display: block; border: black 1px solid;"></div>  
>   
> <span id="usernameError">对不起,用户名不能为空</span>  
> <div></div>  
> <div></div>  
> <input type="text" class="myClass"/>  
> <select class="myClass">  
> <option>专科</option>  
> <option>本科</option>  
> <option selected>研究生</option>  
> <option>硕士</option>  
> </select>  
> <a href="http://www.baidu.com">百度一下</a>  
> <span id="baiDuSpan">点击我链接到百度</span>  
> <ul>  
> <li>中国  
> <ul>  
> <li>北京</li>  
> <li>上海</li>  
> <li>广州</li>  
> </ul>  
> </li>  
> <li>美国</li>  
> <li>俄国</li>  
> </ul>  
> <div id="div1">  
>   
> </div>  
> </body>  
> </html>

>     a{
>     	text-decoration: none;
>     	font: red;
>     }
>     
>     #baiDuSpan
>     {
>     	text-decoration: underline;
>     	cursor: pointer;
>     }
>     
>     /* cursor是鼠标样式,pointer是小手,hand也是,建议使用pointer */
>     /* wait会显示转圈圈 */
>     
>     ul{
>     	list-style-type: none;
>     }
>     /* 通过设置list-style-type为none就可以去掉我们无序列表和有序列表的前面的符号 */
>     
>     #div1{
>     	position: absolute;
>     	border: 1px solid black;
>     	width: 300px;
>     	height: 300px;
>     	left: 100px;
>     	right: 100px;
>     }
>     /* position: absolute;设置绝对定位 */
> 
> a\{  
> text-decoration: none;  
> font: red;  
> \}
> 
> \#baiDuSpan  
> \{  
> text-decoration: underline;  
> cursor: pointer;  
> \}
> 
> /\* cursor是鼠标样式,pointer是小手,hand也是,建议使用pointer \*/  
> /\* wait会显示转圈圈 \*/
> 
> ul\{  
> list-style-type: none;  
> \}  
> /\* 通过设置list-style-type为none就可以去掉我们无序列表和有序列表的前面的符号 \*/
> 
> \#div1\{  
> position: absolute;  
> border: 1px solid black;  
> width: 300px;  
> height: 300px;  
> left: 100px;  
> right: 100px;  
> \}  
> /\* position: absolute;设置绝对定位 \*/