html>head>meta http-equiv='Content-Type' content='text/html; charset=utf-8'>title>sherry的练习项目title>link href='test.css' rel='stylesheet' type='text/css' />style type='text/css'> h5{ color:pink; font-size:13px; }style>script>script>head>body>div id='part_1'> hr /> h3>一、文段格式的各种功能标签h3> hr /> h1>一级标题h1> h2>二级标题h2> h3>三级标题h3> h4>四级标题h4> h5>五级标题h5> h6>六级标题h6> hr /> h4>文段强调的三种方式：strong em spanh4> p>1922年的春天，一个想要成名名叫 strong>尼克·卡拉威（托比·马奎尔Tobey Maguire饰）的作家，strong>离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。 p> p>菲茨杰拉德， span>二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。span>他以诗人的敏感和戏剧家的想象为 em>'爵士乐时代'吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢em>靡年代的不二注解。 p> hr /> h4>引用一句话，自动加引号h4> q>窗前明月光，疑是地上霜q> hr /> h4>引用一段话，自动缩进h4> blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。blockquote> hr /> h4>br回车效果h4> 暗淡轻黄体性柔，br /> 情疏迹远只香留。br /> 何须浅碧深红色，br /> 自是花中第一流。br /> hr /> h4>地址标签，自动变为斜体h4> address>广州番禺广东工业大学address> hr /> h4>引用一句代码h4> code>printf('hello world!')code> br /> h4>引用一段代码，需要贴着边写h4> pre>var message='欢迎';for(var i=1;i=10;i++){ alert(message); } pre> p> hr />div>div id='part_2'> hr /> h3>二、表格格式的各种功能标签h3> hr /> h4>排名不分先后的ul表h4> ul class='title'> li>精彩少年li> li>美丽突然出现li> li>触动心灵的旋律li> ul> br /> h4>排名自动编号的ol表h4> ol> li>精彩少年li> li>美丽突然出现li> li>触动心灵的旋律li> ol> br /> h4>正式表格h4> table> tbody> caption>表格标题caption> tr> th>学生学号th> th>学生姓名th> th>学生性别th> tr> tr> td>10086td> td>小红td> td>女td> tr> tr> td>10087td> td>小覃td> td>女td> tr> tbody> table> hr />div>div id='part_3'> hr /> h3>三、链接与图片标签h3> hr /> h4>直接跳转的链接h4> a href='http://www.baidu.com' title='点击进入百度首页'>a标签的使用a> br /> h4>在新窗口中打开的链接h4> a href='http://www.baidu.com' target='_blank' title='点击进入百度首页'>在新窗口中打开a> br /> h4>发送邮件链接h4> a href='mailto：364773413@qq.com？subject=welcome&body=helloworld'>发送邮件a> br /> h4>插入图片h4> img src='http://img.mukewang.com/52da54ed0001ecfa04120172.jpg' alt='下载失败时的替换文本' title = '提示文本'> hr />div>div id='part_4'> hr /> h3>四、表单标签，用于交互h3> hr /> form method='post' action='save.php'> label>账号：label> input type='text' name='username' value='myname' /> br /> label>密码：label> input type='password' name='password' /> hr /> label>文段输入框label>br /> textarea cols='50' rows='10'>在这里输入内容......##这里的文段跟pre中一样，会保留所有空格和回车，所以此处的文字紧贴着开头## textarea> hr /> 你喜欢旅游吗？（此处点击文字不可选）br /> input type='radio' name='travel' value='喜欢' checked='checked' />喜欢 input type='radio' name='travel' value='不喜欢' />不喜欢 input type='radio' name='travel' value='无所谓' />无所谓 hr /> 你有什么爱好？（此处有加label的for属性，点击文字可选）br /> label for='run'>跑步label> input id='run' type='checkbox' name='trip' value='跑步' checked='checked' />br /> label for='climb'>登山label> input id='climb' type='checkbox' name='trip' value='登山' />br /> label for='swim'>游泳label> input id='swim' type='checkbox' name='trip' value='游泳' checked='checked' />br /> label for='gym'>健身label> input id='gym' type='checkbox' name='trip' value='健身' /> hr /> label>下拉单选爱好：label> select> option value=‘读书’>读书option> option value=‘运动’>运动option> option value=‘音乐’>音乐option> option value=‘旅游’>旅游option> option value=‘购物’ selected='selected'>购物option> select> hr /> label>下拉多选爱好（需要按ctrl键）：label> select multiple=“multiple”> option value=‘读书’>读书option> option value=‘运动’>运动option> option value=‘音乐’>音乐option> option value=‘旅游’>旅游option> option value=‘购物’ selected='selected'>购物option> select> hr /> input type='submit' value='提交'> input type='reset' value='重置'> form>hr />div>div id='part_5'> hr /> h3>五、CSS基础h3> hr /> h4>内联式，嵌入式，外部式CSSh4> h5 style='color:red;font-size:12px;'> 优先级：内联式>嵌入式>外部式。这行字体三种都设了，删掉优先级大的才能显示优先级低的。 h5> hr />div>div id='part_6'> hr /> h3>六、CSS的继承、层叠和特殊性h3> hr /> p class='first'>这里的span继承了颜色粉红属性，没有继承border属性span>，如果继承了，会显示两个红色框span>p> hr />标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：br />p{color:red;} /*权值为1*/br />p span{color:green;} /*权值为1+1=2*/br />.warning{color:white;} /*权值为10*/br />p span.warning{color:purple;} /*权值为1+1+10=12*/br />#footer .note p{color:yellow;} /*权值为100+10+1=111*/br />hr />div>div id='part_7'> hr /> h3>七、CSS文本排版h3> hr /> h4>文字排版h4> p class='font_set'>查看本文段的font_set的css代码可以看到所有文字排版的属性p>br /> h4>段落排版h4> p class='paragraph'>查看本文段的paragraph的css代码可以看到所有段落排版的属性p>hr />div>div id='part_8'> hr /> h3>八、CSS盒模型h3> hr /> h4>元素分类h4> p> 常用的块状元素有(独占一行，可设宽高)：div,p,h1-h6,ol,ul,dl,table,address,blockquote,formbr /> 常用的内联元素有（分享一行，不可设宽高）：a,span,br,i,em,strong,label,q,var,cite,code br /> 常用的内联块状元素有（分享一行，可设宽高）：img,input br /> p> h4>盒模型h4> div id='box'> 此处的盒子设置了边框宽度，padding,margin,border等属性 div> hr />div>div id='part_9'> hr /> h3>九、CSS布局模型h3> hr /> h4>流动模型flowh4> div class='first'>box2div> h1 class='first'>标题h1> p class='first'>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。p> div id='box1' class='first' >box1div>br /> h4>内联元素流动模型h4> a href='http://www.imooc.com'>www.imooc.coma>span>强调span>em>重点em> strong>强调strong> hr /> h4>浮动模型h4> div class='float_father'> div class='float_1'>浮动模型1div> div class='float_2'>浮动模型2div> div> hr /> h4>层模型h4> div class='box_father'> div class='absolute_box'>绝对定位:相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。div> div class='relative_box'>相对定位:虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着div> div class='fixed_box'>固定定位div> div>div>div id='part_10'> hr /> h4>字体缩写h4> p id='font_cut_set'>代码的缩写，属性的同一设置，颜色的缩写，都可以减少代码量，进而减少带宽p>div>div id='part_11'> hr /> h4>行内元素水平居中h4> div class='txtCenter'>我是文本，哈哈，我想要在父容器中水平居中显示。div> h4>定宽块状元素水平居中h4> div class='width_box'>我是定宽块状元素，确定好宽度，规定左右margin值为auto来实现水平居中。div> h4>不定宽块状元素水平居中h4> h3>table方法h3> table class='center'>设置table的左右margin为auto tbody> tr>td> ul> li>a href='#'>1a>li> li>a href='#'>2a>li> li>a href='#'>3a>li> ul> td>tr> tbody> table> h3>display：inline方法h3>设置容器的text-align:center;里面的内容设置 display:inline; div class='container'> ul> li>a href='#'>1a>li> li>a href='#'>2a>li> li>a href='#'>3a>li> ul> div> h3>position:relative 和 left:50%方法h3>通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。br /> div class='container_1'> ul> li>a href='#'>1a>li> li>a href='#'>2a>li> li>a href='#'>3a>li> ul> div> hr />div>div id='part_12'> h3>h3> h4>单行文本垂直居中h4> h2>通过设置父元素的 height 和 line-height 高度一致来实现的h2> h4>多行文本垂直居中h4> table style='background:#ccc;'>tbody>tr>td class='wrap'> div style='background:#eee;'> p>使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middlep> p>css 中有一个用于竖直居中的属性 vertical-align，p> p>但这个样式只有在父元素为 td 或 th 时，才会生效p> p>所以又要插入 table 标签了。p> p>因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。p> div> td>tr>tbody>table> h4>h4>div>div id='part_13'> hr /> h4>隐性改变display类型h4> a href='#' title=''>a元素本来是不可以设置width的，但是设置为 position:absolute 以后，就可以了。a>div>body>html>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
