码迷,mamicode.com
首页 > 其他好文 > 详细

第七堂课

时间:2016-10-31 16:34:21      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:元素   enter   one   url   body   设置   XML   超链接   方向   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#a1{ width:100px; height:30px; background-color:#60C; color:#FFF; text-decoration:none}

#d1{ width:300px; height:300px; background-color:#F3C; text-align:center ; vertical-align:auto; line-height:200px}

#an{ width:104px; height:40px; background-color:#38F; font-size:16px; text-align:center; vertical-align:middle; line-height:40px;}
#wai{ width:300px; height:300px; background-color:#0F0}
#nei{ float:left; width:300px; height:300px; margin:20px 30px 20px 30px; padding:40px 0px 0px 10px}
#li{ width:100px; height:200px; background-color:#C09}


*{ margin:opx auto; padding:opx;}
</style>

</head>

<body>
<div style="alignment-baseline:after-edge">hello</div>
<div style=" font-family:Verdana, Geneva, sans-serif; font-size:36px; font-weight:bold; font-style:italic; color:#000; text-decoration:blink;background-size:600px 600px; background-position:bottom; background-repeat:no-repeat; background-image:url(2016-05-27_plaque_hp.jpg); width:600px;height:600px; background-color:#F00";  >测试文字</div>  <br/>
<a id="a1" href="http://www.baidu.com">超链接</a>
<div id="d1">幸福呀好</div>
<div id="an">百度一下</div>
<p style="text-indent:31px; text-height:50px">感第二方提供优惠让他与偶乳房同归于尽让退团购会回家觉就回家巨坑u句回家回家回家好回家好看好看巨坑好看回家考虑好看即将巨坑看巨坑就你吗, 不能那么, 巨坑就, </p>
<div id="wai">
    <div id="nei">
    <div id="li">
    </div>
    </div>


</div>



</body>
</html>

样式控制大小,写样式属性时,后面要写单位像素px,高度和宽度要用分号;区分
背景图片可以用五个来调整,分别为bottom下边,lift左边,center居中,right右边,top上边

repeat-x是平铺的意思

background-size:      是修改背景图大小

控制字体

网络最常见的字体是微软雅黑,常用的字体大小是14px或16px

font-weigh:bold是字体加粗

font-style:italic是字体倾斜

直接写color:       是代表字体颜色

text-decoration:可以选上划线,下划线,还有删除线,代表文本修饰

超链接,让超链接变成正常文字的外形

给它做一个内嵌,加入样式属性,text-decortaion:none 加入这个,可以打掉超链接的下划线

还学到好几个属性

text-align:ceter   是文字水平对齐方式,ceter是居中

vertical-align垂直对齐方式  line-height:       在行高里面居中,这两个可以配合使用

设置样式

在写段落时<p>内容</p>

可以在p后面增加样式  style="text-indent:30px"    是缩进多少像素的意思

边界边框

边距是margin:      内边距是padding

设置边距的时候,比如说margin:20px 30px 20px 30px   这是按顺时针的方向来的,上右下左

*{margin:opx auto;padding:opx}这句话在做网页的时候都能用到,是把所有元素内边距和外边距都去掉

 

第七堂课

标签:元素   enter   one   url   body   设置   XML   超链接   方向   

原文地址:http://www.cnblogs.com/qishuang/p/6016155.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!