asp老师 发表于 2014-11-30 23:24:01

第一课-第十一课程 时候代码总结

css效果

<!--这个是外联样式的css内容-->
<link href="001.css" rel="stylesheet" type="text/css" />

</head>
---------------------------------------------------------------------------------------------------------

.aaa{}   类别选择器   
#aaa{}id选择器

*{}通配选择器
p a{    }包含选择器/父子选择器 的用法,
---------------------------------------------------------------------------------------------------------------
a{color:#933;}没有点之前链接的颜色
a:link {color:#933;}同上没有点击之前链接的颜色
a:visited {color:#9C6;}   浏览过的链接的颜色
a:hover{color:#009;}   鼠标放上去时候链接的颜色
a:active{color:#F06;}    鼠标点击时候链接的颜色
一般的写法为

h1 a{color:#933;}   没有点击时候链接的颜色

h1 a:hover{color:#009; font-size:36px; background:#0C3;}鼠标放上去点击链接的颜色


.aaa{background:url(xml.jpg) no-repeat; background-position:bottom;}
            
            其他方式: repeat-xrepeat-y repeat
            其他方式:background-positon:right;background-positon:left;background-positon:top;
                        background-position:100px 50px;这个表示的是图片向右面移动100px之后呢在向下移动50px,

body{background:#F30;}这个是标签的css外联样式
span{color:#00F; font-size:45px;}

h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
h2{color:#0C3;}
h3{color:#0F3; background:#000;}

*{ background:#900;}   这个表示的通配选择符的用法
p a{color:#9C9;}   这个表示的是包含选择符的用法

P{color:#F00; font-size:24px; background:#9C6;}
#abc{color:#00F;}

h1,42,p,span,h5{color:#F00;}    2个都可以定义的代码 组合选择符
span,h1{color:#F00;}
h1,h2,h3,h4,h5{color:#3F0; background:#330; font-weight:900;}

------------------------------------------------------------------------------------------------

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <!--网站的编码 utf-8是一个国际编码,gbk

是我们国内用到的编码-->
<title>无标题文档</title>
<meta name="keywords" content="道勤教育,道勤学习,道勤网,免费学习,一起交流" />   <!--网站的关键词-->
<meta name="description"content="让我们一起学习吧,道勤网免费学习网站设计,网站建设,QQ群226547332" /><!--网站

描述的用法-->


<style type="text/css">

<!--这里是内联样式的css内容-->

P{color:#F00; font-size:24px; background:#9C6;}
body{background:#F30;}这个是颜色作为背景的方式
body{ background:url(xml.jpg) no-repeat; }    这个是图片作为背景的代码
span{color:#00F; font-size:45px;}
h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
h2{color:#0C3;}
h3{color:#0F3; background:#000;}

</style>


---------------------------------------------------------------------------------------------------------

HTML代码




<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p>本节视频由 道勤网提供,全部免费建站视频教

程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!为各位新手站长提供学习交流的互助平台,还可以学到网站推广的

知识,如:SEO等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道

勤网努力的方向!QQ群226547332

这个是无序列表的写法
<ul>
<li class="aaa">道勤网</li>
<li>学设计</li>
<li>淘宝美工</li>
<li>做网站</li>
<liid="abc"class="aaa">学设计</li>
<li>一切都是可以从0开始</li>
<liid="abc"class="aaa">学设计</li>
</ul>




<table width="700px" border="1px" >
<tr>
<td class="aaa"   height="610px"> </td>
</tr>
</table>








----------------------------------------------------------------------

我们来看下这些常用到的代码;用来我们学习研究,和知识点的回复!
页: [1]
查看完整版本: 第一课-第十一课程 时候代码总结