之前介绍了基本的网页设计,但是之前的那个只是一个框框,完全没有美观可言,现在介绍如何修饰以及玩出花样,之前的简单介绍点击打开链接
<!-- html与css相结合的第1种方式:给html标签添加style属性 --> <p style="color: #1f3 ;border:#1ff solid; ">这是我做css网页技术</p>2,style标签方式 :
<!-- css与html的连接第二种方式 style标签方式 --> <style type="text/css"> p{ color: #0ff; border: 10px solid; } </style>3,导入方式
<style type="text/css"> /*css和html的连接第三种方式 导入css文件 */ @import url(mycss1.css);
</style>4,链接方式
<span style="white-space:pre"> </span><link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />
<span style="white-space:pre"> </span><style> div{ background: #FF5151; font-size: 12px; }2, class选择器:<在style中以“.”开头的为class选择器,使用时候只需要 class="mm"即可使用>
<span style="white-space:pre"> </span><span style="font-family: Arial, Helvetica, sans-serif;">.mm{</span>
color:#00AEAE; font-size: 18px; }
#pid{ font-size: 50px; color: #2828FF; }
<span style="white-space:pre"> </span>p { color:#00FF00;} <span style="white-space:pre"> </span>p b { color:#FF000;} <span style="white-space:pre"> </span><p>P标签<b>湖南城市学院</b>段落样式</p> <span style="white-space:pre"> </span><p>P标签段落</p> <strong> </strong>组合选择器:
<span style="white-space:pre"> </span>span b,.cc{ color: #9F35FF; font-style: italic; <span style="white-space:pre"> </span>}
<!DOCTYPE html> <html> <head> <title>lvha.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style> div { color: #750000; } div f{ color:#00A600; } .cc{ } /* 超链接未点击状态。 */ <span style="color:#ff0000;">a:LINK </span>{ color:#00A6ff; font-size:18px; } <span style="color:#ff0000;">a:VISITED</span> { color: #5B5B5B; font-size: 80px; } /* 当鼠标移动这里适合,发生相应的反应,光标移到超链接上的状态(未点击) */ <span style="color:#ff0000;">a:HOVER</span> { color: #00DB00; font-size:50%; } /*点击超链接时的状态*/ <span style="color:#ff0000;">a:ACTIVE</span> { color:#FFBD9D; background: #00EC00; font-size: 80px; } </style> </head> <body> <a href="http://www.baidu.com" target="new">你好,这是演示</a> <div>这是div<f>部</f>>分</div> </body> </html>效果图:
<span style="font-size:18px;"> <span style="white-space:pre"> </span>div:hover{ <span style="white-space:pre"> </span> background-color:#f00; <span style="white-space:pre"> </span> color:#fff; <span style="white-space:pre"> </span> }</span>
<!DOCTYPE html> <html> <head> <title>1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style> div{ width: 300px; height: 300px; color: #FF44FF; background-color: #d3a4ff; /*border-style:dotted ; /*整个框都是虚线*/ border-bottom-style: solid ; } #div_1{ margin-bottom: 20px; margin-top:30px; width: 80px; } .aa{ padding-top: 30px; padding-bottom: 30px; padding-left: 30px; background-color: #00A600; border-bottom: ridge; } </style> </head> <body> <div>这是第一个div</div> <div id="div_1">这是第二个,多加点多检点</div> <div class="aa">这是第三个</div> </body> </html>
简单地border使用:padding和Margins
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"><img src="http://img.blog.csdn.net/20150924211926055?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
<html> <head> <title>cssdemo.html</title> <style type="text/css"> div{ border:#09f solid 1px; height: 100px; width: 200px; } #div_1{ border-bottom: #f60 2px dashed; } #div_2{ /* margin:20px; 四个方向*/ /* margin:20px 100px; 上下20 和 左右100 */ /* margin:20px 100px 200px; 上20 , 左右100 ,下200 */ margin-left: 30px; margin-top: 25px; padding:20px 50px; } </style> </head> <body> <div id="div_1">这是一个div中的文字1</div> <div id="div_2">这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................</div> <div id="div_3">这是一个div中的文字3</div> </body> </html>
<html> <head> <title>cssdemo.html</title> <style type="text/css"> div{ border:#09f solid 1px; height: 100px; width: 200px; } #div_1{ background-color: #f90; float:left; } #div_2{ background-color: #0cf; float:left; } #div_3{ background-color: #3f0; float:left; clear: left; } </style> </head> <body> <div id="div_1">这是一个div中的文字1</div> <div id="div_2">这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................</div> <div id="div_3">这是一个div中的文字3</div> </body> </html>
<html> <head> <title>cssdemo.html</title> <style type="text/css"> div{ border:#09f solid 1px; height: 100px; width: 200px; } #div_1{ background-color: #f90; float:left; position: absolute; top:120px; left:120px; } #div_2{ background-color: #0cf; float:left; width:300px; } #div_3{ background-color: #3f0; float:left; clear: left; } #div_4{ background-color: #3f0; clear:both; background-color: #f90; position: relative ; top:20px; } #div_5{ background-color: #0cf; float:left; width:300px; } #div_6{ background-color: #3f0; float:left; clear: left; } #div0{ position: absolute; top:200px; left:200px; } </style> </head> <body> <div id="div_1">这是一个div中的文字1</div> <div id="div_2">这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................</div> <div id="div_3">这是一个div中的文字3</div> <hr> <div id="div0"> <div id="div_4">这是一个div中的文字4</div> <div id="div_5">这是一个div中的文字5多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................</div> <div id="div_6">这是一个div中的文字6</div> </div> </body> </html>