随笔

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

html：

<ul>

<li class="title"><a href="">电子书</a></li>
<li><a href="">免费</a></li>
<li><a href="">电子书</a></li>
<li><a href="">言情</a></li>
</ul>
<ul>
<li class="title"><a href="">电子书</a></li>
<li><a href="">免费</a></li>
<li><a href="">电子书</a></li>
<li><a href="">言情</a></li>

</ul>

css：

/*重点：ul可以设置边框样式，设置a列表的外边框效果*/
#banner ul.cate_box .sub_cate_items ul{
/*此处是解决子元素浮动而造成的父元素高度塌陷*/
overflow: hidden;
border-top:1px solid #ddd;
width: 448px;
text-align: center;
margin-left:5px;
margin-top: 5px;}

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

html：

<div class="sub_cate_banner">
<p><img src="Images/cate_banner_01.jpg" alt=""></p>
<p><img src="Images/cate_banner_02.jpg" alt=""></p>
</div>

css：

/*重点：设置图片分段“靠右”展示，可用P标签包裹，再样式设置浮动*/
#banner ul.cate_box .sub_cate_box .sub_cate_banner{
float: right;
}

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

1：利用ul和float可以使图片链接水平排列

2：利用P标签可以实现图片链接纵向排列

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

问题描叙：要将8个图片在分成两行排列，每个图片之间要有一定的间距？

这里面要的效果是图片表格要和上面对齐，本来设置的是父元素的边框是与上面是对齐的，但是发现设置每个li之间有间距后，最后一列的图片因为有一个间距，所以导致不对齐

解决办法：将父元素的宽度设置大些，然后设置边框的颜色为transparent即可，图片可采用background的方法

html：section id="content">
<div class="window_title">
<p>生活的橱窗
<i>每一天展示精彩</i>
</p>
</div>
<div class="window_pic"> 
<ul>
<li><b></b></li>
<li><b></b></li>
<li><b></b></li>
<li><b></b></li>
<li><b></b></li>
<li><b></b></li>
<li><b></b></li>
<li><b></b></li>
</ul>
</div>
</section>

css：#content{
width: 1250px;
height: 462px;
border:1px solid black;
box-sizing: border-box;
margin-left: 338px;
}


#content .window_title{
margin-top: 0px;
}
#content .window_title p{
font-size:24px;
font-weight:bold;
color:#666;
margin-bottom:0px;
margin-top: 17px;
}


#content .window_title p>i{
font-size:16px;
font-weight:normal;
color:#999;
}


#content .window_pic{
box-sizing: border-box;
width: 1250px;
height: 412px;
border:1px solid black;
}


#content .window_pic ul{
width: 100%;
height: 366%;
padding:0px;
margin: 0px auto;
}




#content .window_pic li{
width: 292px;
height: 189px;
float: left;
list-style: none;
border:1px solid #666;
margin-right: 10px;
margin-bottom: 5px;
background: url(Images/index/show_01.) no-repeat;
}
-------------------------------------------------------------------------------------------------------------------

一般遮幕的效果都是在元素里面添加其他元素设置的

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

#content .window_pic li:hover{
/*transition: 过度属性 过度时间 过度函数 过度延迟*/
transition:background 500ms linear 100ms;
background-position: -10px 0;
}

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

problem1：若想显示两行内容，可以设置ul的宽度为总li宽度的一半，并设置浮动

problem2: 若想显示两列内容，可是ul的盖度为总li高度的一半，并设置浮动
         

html： <aside class="rt_list">
<ul>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
<li>
<a href="#">
<img src="Images/index/rBEbRlN5zCsIAAAAAAALfFfJRv8AACGGgO__3sAAAuU660.jpg">
</a>
</li>
</ul>
<p>
<img src="Images/index/fl_ad_02.jpg">
</p>
</aside>

css：

div.floor div.content{
/*左浮动，宽度，高度*/
float:left;
width:790px;
height:362px;
}
div.floor div.content dl{
/*左浮动，宽度，高度，右下边框*/
float:left;
width:157px;
height:180px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
}
div.floor div.content div{
/*宽度，高度，右下边框，左浮动*/
width:473px;
height:180px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
float:left;
}
div.floor dt{
text-align:center;
}
div.floor dd{
padding:0 10px;
line-height:22px;
}
div.floor dd.text{
text-align:center;
color:#E4393C;
}
/*右侧*/
div.floor aside.rt_list{
/*左浮动，宽度，高度*/
float:left;
width:210px;
height:362px;
}
div.floor aside.rt_list ul{
border-bottom:1px solid #ddd;
height:180px;
}
div.floor aside.rt_list li{
/*左浮动，宽度，上边框，内容水平居中对齐*/
float:left;
width:50%;
border-top:1px dashed #ddd;
text-align:center;
}

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

重点：对li进行浮动设置时，若进行边框设置会影响浮动效果

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

/*重点：因为li都设置了左浮动，所以造成了父元素压线，由于ul中只能添加li元素，所以不能添加div空元素
解决方法1：可以在父元素ul中设置高度*/

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

#content .hot_order div.more{
/*重点：若div元素的宽度是小于某行剩余的宽度，则会影响浮动的展示*/
width: 300px;
height: 300px;
border:1px solid yellow;
float: left;
}

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

text-decoration属性：

none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

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

CSS3选择器：http://www.w3school.com.cn/cssref/css_selectors.asp

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

CSS3 :target 选择器

CSS 选择器参考手册

实例

突出显示活动的 HTML 锚：

p:target
{ 
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}

亲自试一试

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

1.1 Border-radius

  圆角矩形

border-radius: 7px 7px 7px 0;

 Border-radius: 左上 右上  右下 左下；  顺时针

 

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

 标签嵌套  

  1. 块级元素  ---  任何元素可以的。     

  2. 行内元素  --    行内元素  只 嵌套元素    b  u span   i -  s

  3. P 不能放 div 。    

  4. a 无所不能 。    a里面不能放 a    input 等

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

 Z-index  层级   div 层

只有 定位的盒子 （除了static） 才有 z-index    

如果都是定位  绝对定位 他们默认的z-index  是  0   

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

背景半透明

CSS3  

Background: rgba(0,0,0,0.5);     

 

Opacity: 0.5; 让盒子半透明   里面的内容也半透明