2018_IFE第7-8天作业总结及读书笔记

rollingjkx

于 2018-05-27 21:59:13 发布

阅读量263

点赞数 2

分类专栏： 2018IFE

本文链接：https://blog.csdn.net/rollingjkx/article/details/80473101

版权

2018IFE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

任务是根据设计图来完成一个布局，其中有三个地方有难度，一个是轮播图按钮，二是选项卡的设计，三是弹性布局

代码如下

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
    <div id="lgandnav">
        <div id="logo">logo</div>
        <ul>
            <li><a href="">Github</a></li>
            <li><a href="">Register</a></li>
            <li><a href="">Login</a></li>
        </ul>
    </div>
</header>
<div id="banner">
    <div id="ca_wrap">
        <div id="carousle_wrap">
    <div class="carousel"><div>1</div></div>
    <div class="carousel"><div>2</div></div>
    <div class="carousel"><div>3</div></div>
    <div class="carousel"><div>4</div></div>
        </div>
</div>
</div>
<nav id="nav">
    <ul>
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">PROFILE</a></li>
        <li><a href="#">ABOUT</a></li>
    </ul>



</nav>
<hr/>
<div id="content">
    <div id="box1" class="box">content1</div>
    <div id="box2" class="box">content2</div>
    <div id="box3" class="box">content3</div>
    <div id="center">
    <div id="box4" class="box">content4</div>
    <div id="box5" class="box">content5</div>
    <div id="box6" class="box">content6</div>
    <div id="box7" class="box">content7</div>
   </div>
    <div id="box8" class="box">content8</div>
    <div id="box9" class="box">content9</div>
    <div id="box10" class="box">content10</div>
</div>
 <footer>
     <p>©2018ife.baidu.com</p>
 </footer>
<script src="layout.js"></script>
</body>
</html>

CSS:

*{
    padding:0;       /*样式设置前要始终清除内外边距，不然会在顶部出现白条*/
    margin:0;
}
html{
    width:100%;
    height: 100%;
}
body{
    width:100%;
    height: 100%;

}
header{
    background-color: #3d444c;
    width:100%;
    height:15%;
}
header #lgandnav{
    width:960px;
    margin: 0 auto;
    position:relative;
}
header #lgandnav ul{
     list-style-type: none;
    position: relative;
    top: 5px;

}
header #lgandnav ul li {
    float:right;
    display: inline-block;
    margin-right: 20px;

}
header #lgandnav ul li a{
     color:white;


}

header #lgandnav #logo{
    float:left;
    color:white;
    font-size:30px;

}

/*
banner css
*/

#banner{
    height:30%;
    background-color:#5fbe32;
}

#banner #ca_wrap{
    position:relative;
    width:960px;
    height:100%;
    margin: 0 auto;
}
#banner #ca_wrap #carousle_wrap{
      position:absolute;
     right:0;
    bottom: 8px;
}
/*为类设置绝对定位会重叠在一起*/
#banner .carousel{
    display:inline-block;
    width:23px;
    height:28px;
}
#banner .carousel div{
    height: 100%;
    border:0.5px solid rgb(24, 17, 17);
    background-color:rgba(220,220,220,0.5);
    text-align: center;

}


#carousle_wrap .carousel div:hover{
    padding-top: 10px;
    background-color:rgba(220,220,220,1);   /*paddingtop设置后不用再设置hover的高度，原本没有padding加了就相当于增加了高度，两个都添加的话上下都会延伸*/
     border: 1px solid black;
 }
/*导航栏选项卡设置*/
#nav{
    width:960px;
    height:45px;
    position:relative;
    top:1px;
}
#nav ul{
    list-style-type: none;
    height: 45px;
    margin-left: 40%;

}
#nav ul li{

    width: 100px;
    height:45px;
    float:left;
   border:1px solid #b5b5b5;
    border-bottom-color: transparent;
    border-top-left-radius:17px;
    border-top-right-radius: 17px;
    background-color: #e1e1e1;

}
#nav ul li a{
    text-decoration: none;
    color: black;
    width:100%;
    display: inline-block;
    text-align: center;
    padding-top: 15px;

}

 #nav ul li.active{         /*无法清除选项卡下边缘*/     /*问题在朋友帮助下已解决用相对定位将选项卡总的往下压1px即可*/
     background-color: white;
 }
hr{
    margin-top: 2px;
    height:1px;
    border:none;
    background-color: rgba(136, 136, 136,0.4);
    clear:both;

}
 /*flex-box*/
#content{
    margin: 0 auto;
    width:960px;
    display: flex;
    flex-flow: row wrap;
;
}
#content div{
    text-align: center;
    flex:1;
}


#content .box{
    border:1px #b5b5b5 solid;
    padding:80px;
    margin:5px;

}
#content #center{
  display:flex;
}
/*
我在#content div上设置了一个flex:1，我原本以为是会将content下面所有的div比例都变为1， 这样所有的div都会占1/11，
#center和他的子元素div比例如果都一样就会矛盾，然后我在#center上又设置了一个display:flex，
 而且他的子元素仍然有flex:1,子元素平分的空间就变成了#ce

var tabs=document.querySelectorAll("#nav ul li");
console.log(tabs[0],tabs[1],tabs[2]);
for(var i=0;i<tabs.length;i++)
{
    var tab=tabs[i];
    setTabhandler(tab,i);
}

function setTabhandler(tab,i){
    tab.οnclick=function (event) {
        for(i=0;i<tabs.length;i++)
        {
            if(tabs[i].getAttribute("class"))
            {
                tabs[i].removeAttribute("class");
            }
        }
        tab.setAttribute("class","active");
    }
}

nter的空间 */footer{ background-color: #3d444c; height: 10%;}footer p{ color: white; text-align: center; padding-top: 1%;}/*float会脱离文档流，父元素高度变为0*/

float:原本为了设计来让文字环绕图片，所以他有几个特性。

1.破坏性（坍塌父元素高度）

2.包裹性（如果一个div如果不设置display，默认占一行，加上float会收缩到本身内容宽度）

3.清除空格，显示中的空格大多是因为换行符导致

清除float的四种方法：

1.父元素设置overflow:hidden 父元素就有高度了，不会坍塌

2.父元素也进行浮动，以毒攻毒

3.在需要清除float的元素后面加上一个<div style="clear:both"></div>

4.利用伪元素选择器在元素后加一个clear:both元素，

.clear:fix{

content:'';

display:table;

clear:both;

}

rollingjkx

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2018_IFE第7-8天作业总结及读书笔记

任务是根据设计图来完成一个布局，其中有三个地方有难度，一个是轮播图按钮，二是选项卡的设计，三是弹性布局代码如下HTML:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;
复制链接

扫一扫

专栏目录