百度前端学院学习Day2

前言

      昨天，了解了Web开发的基本原理，使用html制作了简易的简历，以及编写css为文本和字体添加属性。

 

4.背景、边框、列表、链接和选择器

目标

      掌握CSS稍复杂的选择器，还有背景、边框等样式属性。

 

阅读

• W3School-背景

• W3School 边框

• W3SChool 列表
• W3School 链接
• 选择器的优先级

 

编码

#head{
  heigth: 100px;
  background-color: #66cc99;
  background-repeat: no-repeat;
  background-position: center; 
}
td, th{
  border-color: #ff0000;
  border-style: solid;
  border-width: 1px;
}

ul{
  list-style-type: square;
  list-style-image: url(/i/arrow.gif);
}

a:link, a:visited{
  color: blue;
}

a:hover, a:active{
  color: yellow;
}

 

小结

     CSS在背景效果方面上比较实用，盒模型让元素拥有边框等属性，能更好的显示元素。列表的标志有不同的装饰效果，也可以使用图片。超链接有多种不同的状态，使用伪类来为不同的状态添加不同的样式。

 

 

5、6：三种简历

目标

      通过阅读以及练习，掌握CSS盒模型和通过Float进行简单的布局。

 

阅读

• MDN-盒模型
• MDN-再述盒模型
• W3C

接下来我们了解一下浮动

• MDN-浮动
• W3C 浮动
• 如何理解 CSS 中的浮动布局方式？
• What methods of ‘clearfix’ can I use?
• 清除浮动（clearfix hack）

    

编码

HTML部分

    
    
    



    
简历
    

        

            
基本信息
            
姓名 张三      性别     男      应聘职位     web前端工程师
        
        

            
联系方式
            
手机 12312341234      Email [email protected]     个人主页 Github
        
		
        

            
能力描述
            
技术能力
熟练掌握HTML,CSS,JavaScript 

综合能力
良好的沟通，主动积极，努力勤奋
        
        

            
教育经历
            
本科
百度前端技术学院小薇学院

研究生
百度前端技术学院大斌学院
        
        

            
项目经历
            
小度小度
作为前端工程师角色参与了ABC组件的开发

SAN Doc
作为文档工程师参与了SAN Doc的编写
        
    

 

第一个CSS样式

body {
	padding: 0px;
	margin: 0px auto;
}

h1 {
	float: left;
	width: 20%;
	height: 680px;
	margin: 0;
	padding-top: 50px;
	
	text-align: center;
	background: yellow;
	background-clip: padding-box;
	color: black;
}

.text {
	float: left;
	padding: 0 0 0 10px;
}

第二个CSS样式

*{
    margin: 0;
    padding: 0;
}
h1 {
    width:100%;
    height: 64px;
    padding-top: 20px;
    padding-left: 40px;
	font-size: 40px;
	
    display: inline-block;
    color: black;
    background-color: #858585;
    text-align: left;
}
h2 {
    float: left;
    width: 160px;
    height: 120px;
    padding-top: 50px;
	
    text-align: center;
    background-color: #d6d6d6;
    border-bottom:#e6e6e6 solid 1px;
}
p {
    display: inline-block;
	
    height: 140px;
    padding-left: 20px;
    padding-top: 30px;
    border-bottom:#E6E6E6 solid 1px;
}

 

验证

请反复确认你是否掌握了以下概念

• 盒模型的概念
• inline、block和inline-block的概念
• 内外边距，宽度，高度，box-sizing等属性
• 浮动，清除浮动
• 如何使用浮动进行布局

 

小结

     此次练习，关键在于设置相邻的框的属性来达到理想的布局。首先，需要掌握盒模型和浮动布局，然后依据情况设置元素的宽度和高度，还可以使用display、box-sizing、clear等属性来完成布局。