页面样式学习笔记

李维强-15级

占楼
CSS3,H5等简单页面布局，不会不行，我把HTML,CSS的书看了一遍，发现没有什么用。。。。要记得东西这么多，要学会只有在项目中实践才知道概念，到时候具体要用到哪些标签，JQ怎么设置，CSS常用标签是啥子，都之后经历过才知道。。作为我这个菜鸟阶段的，不需要懂什么高大上的前端，给自己定位CSS2懂，CSS3略懂即可。


1楼 导航栏框架样式
2楼滑动广告 轮播
6楼flexbox布局
7楼touch事件
8楼滚动到底部自动加载
10楼float属性的认识
弹出下拉导航 CSS控制实现
jQuery选择器总结

李维强-15级

导航 弹出下拉的布局

[XHTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

    
<ul id="nav">
        <li>
            <a href="#">文章</a>
            <ul>
                <li><a href="#">文章1</a></li>
                <li><a href="#">文章2</a></li>
                <li><a href="#">文章3</a></li>
                <li><a href="#">文章4</a></li>
                <li><a href="#">文章5</a></li>
            </ul>
        </li>
    </ul>

[XHTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

ul{
    padding:0;
    margin:0;
    list-style:none;
}
li{
    float:left;
    width:160px;
}
ul li{
    position:relative;
}
li ul{
    display:none;
    top:30px;
    position:absolute;
}
li:hover ul, li.over ul{
    display:block;
}

这里关键点就是relative的设置 和absolute的设置，然后再来设置hover，这里li:hover ul意思是li当hover的时候，ul的样式应该怎样。
一旦设置relative，了当前层就要往上提升1层。这个时候 需要用z-index来控制层级关系

李维强-15级

float属性的认识
http://blog.csdn.net/weixin_36185028/article/details/52695737
float 文字环绕的坑~~
http://www.cnblogs.com/lanleiming/p/5434314.html

李维强-15级

滚动到页面底部 自动加载
http://blog.csdn.net/smartsmile2012/article/details/39343361


https://segmentfault.com/q/1010000007379027?_ea=1330493

以上两个内容都可以参照下


因为scroll事件大量存在，所以使用$.throttle 节流来优化浏览器
http://caibaojian.com/javascript-resize-performance.html

李维强-15级

手机端html5触屏事件(touch事件)
http://blog.sina.com.cn/s/blog_51048da70101f0ex.html
直接上代码

1. 
   
2.     <div style="-webkit-box-flex:1;" id="Serch">
   
3.         <a class="serchlable" ><span style="color:white">搜索</span></a>
   
4.     </div>
   
5. 
   
6. <script type="text/javascript">
   
7.     $("#Serch").on("touchstart", function (e) {
   
8.         $(this).css("background-color", "rgb(150,0,0)");
   
9.     });
   
10.     $("#Serch").on("touchend", function (e) {
    
11.         $(this).css("background-color", "rgb(250, 77, 77)");
    
12.     });
    
13. </script>
    
14. //用this指针可以选到当前的dom
    

复制代码

李维强-15级

Flexbox 为 display:-webkit-box 布局
http://www.cnblogs.com/frankwong/p/4603141.html

李维强-15级

bootstrup 插件
http://www.jq22.com/

李维强-15级

本人抄袭了一段现在微信朋友圈里面那些鸡汤软文的CSS样式，拿去发文章，布局什么的都够了。。。其他都不说了，这里注意，为了适应不同分辨率出的不同字号，他用了@media标签来先判断screen的范围

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

html {
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	line-height:1.6
}
body {
	-webkit-touch-callout:none;
	font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
	background-color:#f3f3f3;
	line-height:inherit
}
body.rich_media_empty_extra {
	background-color:#fff
}
body.rich_media_empty_extra .rich_media_area_primary:before {
	display:none
}
h1,h2,h3,h4,h5,h6 {
	font-weight:400;
	font-size:16px
}
* {
	margin:0;
	padding:0
}
a {
	color:#607fa6;
	text-decoration:none
}
.rich_media_inner {
	font-size:16px;
	word-wrap:break-word;
	-webkit-hyphens:auto;
	-ms-hyphens:auto;
	hyphens:auto
}
.rich_media_area_primary {
	position:relative;
	padding:20px 15px 15px;
	background-color:#fff
}
.rich_media_area_primary:before {
	content:" ";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:1px;
	border-top:1px solid #e5e5e5;
	-webkit-transform-origin:0 0;
	transform-origin:0 0;
	-webkit-transform:scaleY(0.5);
	transform:scaleY(0.5);
	top:auto;
	bottom:-2px
}
.rich_media_area_primary .original_img_wrp {
	display:inline-block;
	font-size:0
}
.rich_media_area_primary .original_img_wrp .tips_global {
	display:block;
	margin-top:.5em;
	font-size:14px;
	text-align:right;
	width:auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal
}
.rich_media_area_extra {
	padding:0 15px 0
}
.rich_media_title {
	margin-bottom:10px;
	line-height:1.4;
	font-weight:400;
	font-size:24px
}
._list {
	margin-bottom:18px;
	line-height:20px;
	font-size:0
}
.rich_media_meta_list em {
	font-style:normal
}
.rich_media_meta {
	display:inline-block;
	vertical-align:middle;
	margin-right:8px;
	margin-bottom:10px;
	font-size:16px
}
.meta_original_tag {
	display:inline-block;
	vertical-align:middle;
	padding:1px .5em;
	border:1px solid #9e9e9e;
	color:#8c8c8c;
	border-top-left-radius:20% 50%;
	-moz-border-radius-topleft:20% 50%;
	-webkit-border-top-left-radius:20% 50%;
	border-top-right-radius:20% 50%;
	-moz-border-radius-topright:20% 50%;
	-webkit-border-top-right-radius:20% 50%;
	border-bottom-left-radius:20% 50%;
	-moz-border-radius-bottomleft:20% 50%;
	-webkit-border-bottom-left-radius:20% 50%;
	border-bottom-right-radius:20% 50%;
	-moz-border-radius-bottomright:20% 50%;
	-webkit-border-bottom-right-radius:20% 50%;
	font-size:15px;
	line-height:1.1
}
.meta_enterprise_tag img {
	width:30px;
	height:30px!important;
	display:block;
	position:relative;
	margin-top:-3px;
	border:0
}
.rich_media_meta_text {
	color:#8c8c8c
}
span.rich_media_meta_nickname {
	display:none
}
.rich_media_thumb_wrp {
	margin-bottom:6px
}
.rich_media_thumb_wrp .original_img_wrp {
	display:block
}
.rich_media_thumb {
	display:block;
	width:100%
}
.rich_media_content {
	overflow:hidden;
	color:#3e3e3e
}
.rich_media_content * {
	max-width:100%!important;
	box-sizing:border-box!important;
	-webkit-box-sizing:border-box!important;
	word-wrap:break-word!important
}
.rich_media_content p {
	clear:both;
	min-height:1em
}
.rich_media_content em {
	font-style:italic
}
.rich_media_content fieldset {
	min-width:0
}
.rich_media_content .list-paddingleft-2 {
	padding-left:30px
}
.rich_media_content blockquote {
	margin:0;
	padding-left:10px;
	border-left:3px solid #dbdbdb
}
img {
	height:auto!important
}
@media screen and (device-aspect-ratio:2/3),screen and (device-aspect-ratio:40/71) {
	.meta_original_tag {
		padding-top:0
	}
}
@media(min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) {
	.mm_appmsg .rich_media_inner,.mm_appmsg .rich_media_meta,.mm_appmsg .discuss_list,.mm_appmsg .rich_media_extra,.mm_appmsg .title_tips .tips {
		font-size:17px
	}
	.mm_appmsg .meta_original_tag {
		font-size:15px
	}
}
@media(min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) {
	.mm_appmsg .rich_media_title {
		font-size:25px
	}
}
@media screen and (min-width:1024px) {
	.rich_media {
		width:740px;
		margin-left:auto;
		margin-right:auto
	}
	.rich_media_inner {
		padding:20px
	}
	body {
		background-color:#fff
	}
}
@media screen and (min-width:1025px) {
	body {
		font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif
	}
	.rich_media {
		position:relative
	}
	.rich_media_inner {
		background-color:#fff;
		padding-bottom:100px
	}
}
.radius_avatar {
	display:inline-block;
	background-color:#fff;
	padding:3px;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	overflow:hidden;
	vertical-align:middle
}
.radius_avatar img {
	display:block;
	width:100%;
	height:100%;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	background-color:#eee
}
.cell {
	padding:.8em 0;
	display:block;
	position:relative
}
.cell_hd,.cell_bd,.cell_ft {
	display:table-cell;
	vertical-align:middle;
	word-wrap:break-word;
	word-break:break-all;
	white-space:nowrap
}
.cell_primary {
	width:2000px;
	white-space:normal
}
.flex_cell {
	padding:10px 0;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center
}
.flex_cell_primary {
	width:100%;
	-webkit-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	box-flex:1;
	flex:1
}
.original_tool_area {
	display:block;
	padding:.75em 1em 0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	color:#3e3e3e;
	border:1px solid #eaeaea;
	margin:20px 0
}
.original_tool_area .tips_global {
	position:relative;
	padding-bottom:.5em;
	font-size:15px
}
.original_tool_area .tips_global:after {
	content:" ";
	position:absolute;
	left:0;
	bottom:0;
	right:0;
	height:1px;
	border-bottom:1px solid #dbdbdb;
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
	-webkit-transform:scaleY(0.5);
	transform:scaleY(0.5)
}
.original_tool_area .radius_avatar {
	width:27px;
	height:27px;
	padding:0;
	margin-right:.5em
}
.original_tool_area .radius_avatar img {
	height:100%!important
}
.original_tool_area .flex_cell_bd {
	width:auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal
}
.original_tool_area .flex_cell_ft {
	font-size:14px;
	color:#8c8c8c;
	padding-left:1em;
	white-space:nowrap
}
.original_tool_area .icon_access:after {
	content:" ";
	display:inline-block;
	height:8px;
	width:8px;
	border-width:1px 1px 0 0;
	border-color:#cbcad0;
	border-style:solid;
	transform:matrix(0.71,0.71,-0.71,0.71,0,0);
	-ms-transform:matrix(0.71,0.71,-0.71,0.71,0,0);
	-webkit-transform:matrix(0.71,0.71,-0.71,0.71,0,0);
	position:relative;
	top:-2px;
	top:-1px
}
.rich_media_global_msg {
	position:fixed;
	top:0;
	left:0;
	right:0;
	padding:1em 35px 1em 15px;
	z-index:1;
	background-color:#c6e0f8;
	color:#8c8c8c;
	font-size:13px
}
.rich_media_global_msg .icon_closed {
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-5px;
	line-height:300px;
	overflow:hidden;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	background:transparent url(/mmbizwap/zh_CN/htmledition/images/icon/appmsg/icon_appmsg_msg_closed_sprite.2x.png) no-repeat 0 0;
	width:11px;
	height:11px;
	vertical-align:middle;
	display:inline-block;
	-webkit-background-size:100% auto;
	background-size:100% auto
}
.rich_media_global_msg .icon_closed:active {
	background-position:0 -17px
}
.preview_appmsg .rich_media_title {
	margin-top:1.9em
}
@media screen and (min-width:1024px) {
	.rich_media_global_msg {
		position:relative;
		margin:0 20px
	}
	.preview_appmsg .rich_media_title {
		margin-top:0
	}
}

李维强-15级

滑动广告
使用scroll snap points 属性定位用户滑动图片的定位。。。不过要定时滑动，还是需要jQuery的animate动画实现。

1. $(".gallery").animate({scrollLeft:(300)},100);

复制代码

关于定位的具体文章 参见。。。
http://www.w3cplus.com/css3/css-scroll-snap-points.html

李维强-15级

写这个样式，是我逛天猫的时候，华为专区 https://www.vmall.com/huawei，看到的导航栏布局，然后F12看人家是怎么布局，怎么控制的，然后研究了一阵才写出这个来，主要是为了练习，因为导航哪里都可以用，吃透一个导航样式布局，管用很久。
效果如下：


下面是页面代码

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

<div class="nav-main">
    <div class="layout">
        <nav class="naver">
            <ul id="naver-list">
                <li id="huawei1" class="" >
                    <a href="http://www.baidu.com"><span>联想专区</span></a>
                </li>
                <li id="huawei2" class="" >
                   <a href="http://www.baidu.com" ><span>华为专区111</span></a>
                </li>
                <li id="huawei3" class="" >
                    <a href="http://www.baidu.com"><span>小米专区</span></a>
                </li>
                <li id="huawei4" class="" >
                    <a href="http://www.baidu.com"><span>OPPO专区</span></a>
                </li>                
            </ul>
            <div class="list-category">
                @*这个里面填内容*@
            </div>
        </nav>

    </div>
</div>

<script type="text/javascript">
    $("#naver-list a").hover(function () {
        $(this).addClass("hover");
        var IdValue = $(this).parent().eq(0).attr("id");
        var listCatagWidth = $("div #" + IdValue).width();
        $("div .list-category").css("width", listCatagWidth);
        
        $("div .list-category").css("left", $(this).parent().eq(0).position().left);
        $("div .list-category").css("display", "block");
    }, function () {
        $(this).removeClass("hover");
        $("div .list-category").css("display", "none");
    });
</script>

下面是CSS

[CSS] syntaxhighlighter_viewsource syntaxhighlighter_copycode

body {
    margin:0;
    font: 12px/1.5 Arial,Helvetica,sans-serif;
}
html {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	margin:0;
	padding:0
}
a{
    cursor: pointer;
}
.nav-main{
    background-color: #ca151e;
    min-width: 1200px;
    height: 40px;
    font-family: 微软雅黑;
    padding:0;
    margin: 0;
    width:100%;

}
.layout{
    position:relative;
    display: table;
    margin: 0 auto;
    width: 1200px;
    padding:0;

}
.layout::before, .layout::after {
    content: "";
    display: table;
}
.naver{
    position: absolute;
    top: 0;
    left: 240px;
    width: 960px;
    font-family: 微软雅黑;
}

.naver ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.naver li{
    float:left;
}
.naver a{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 40px;
    line-height: 39px;
    font-size: 14px;
    color: #FFF;
    padding: 0 30px;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
}
.naver a span {
    cursor: pointer;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    z-index: 410;
}
.naver li  .hover{
    background-color: #a21118;
} 

.layout .list-category{
    position: absolute;
    top:40px;
    left:240px;
    /*width:110px;  先要设置 才在没有hover的时候看得到效果*/
    height:250px;
    background-color:rgb(215, 197, 197);
    display:none;
}

很多时候就是调试CSS，达到目的，CSS本身自带软动画

jq里面的.position()和.offset()的区别 ，前者相对于夫级元素，后者相对于窗口
搞清楚，margin，border，padding分别是元素的哪3层。。。