您的位置：首页 > Web前端 > CSS

HTML、CSS学习笔记

2013-09-17 14:02 369 查看

这一页先跳过去吧，等回来再学。

HTML5<detail>标签用法

如下图：





代码如下：

<details>
<summary>This is the Title</summary>
<p>
This is my content.
</p>
</details>


09282013

overflow:auto scroll hidden;vertical-align:top bottom;clip:rect();

line-height：设置行间距

clear:清除元素侧面的浮动元素

visibility:visible hidden;显示和隐藏

list-style-type:none：没有点

list-style-position:outside：外面

h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p {text-transform:lowercase}

input:focus 在框中显示颜色

first-child 匹配第一个元素，如：p:first-child i {color:#fff;}

<html>
<head>
<style type="text/css">
p:first-line                                        /*这里处理的是第一行*/
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>

<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>

</html>


/*用CSS 格式化吧，这是很好的规则 每次用CSS 都格式化一下页面 例如：*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
-x-system-font:none;
font-family:"宋体",Corbel,Verdana,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
padding:0;
text-align:left;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:600;}
ol,ul,li{list-style-image:none;
list-style-position:outside;
list-style-type:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/*其中“ol,ul,li{list-style-image:none;
list-style-position:outside;
list-style-type:none;}”
这句已经就是清除无序列表后出现的那个点*/


09292013

今天学到的重要的知识，分辨一下两段代码区别，就是这样。

div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}


div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:left;
border-left:1px solid gray;
padding:1em;
}


前者比后者多了一条线，原因在于margin-left:190px

子元素选择器：table.company td>p.这里的四者缺一不可，必须是class为company的table中的td中的p，table变为div是不行的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航