百度前端学院学习Day2

最新推荐文章于 2024-07-08 16:10:56 发布

gucheng86

最新推荐文章于 2024-07-08 16:10:56 发布

阅读量274

点赞数

分类专栏：学生文章标签： html css 读书笔记

本文链接：https://blog.csdn.net/weixin_39667306/article/details/82717155

版权

学生专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

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

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

目标

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

阅读

编码

#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进行简单的布局。

阅读

接下来我们了解一下浮动

编码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style_2.css" type="text/css">
    <title>resume</title>
</head>

<body>
    <h1>简历</h1>
    <div class="text">
        <div class="info">
            <h2>基本信息</h2>
            <p><b>姓名</b> 张三  &nbsp&nbsp&nbsp&nbsp<b>性别</b> &nbsp&nbsp&nbsp 男 &nbsp&nbsp&nbsp&nbsp&nbsp<b>应聘职位</b>&nbsp&nbsp&nbsp&nbsp&nbspweb前端工程师</p>
        </div>
        <div class="contact">
            <h2>联系方式</h2>
            <p><b>手机</b> 12312341234 &nbsp&nbsp&nbsp&nbsp <b>Email</b> <a href="">joinefe@baidu.com</a> &nbsp&nbsp&nbsp&nbsp<b>个人主页</b> <a href="">Github</a></p>
        </div>
		
        <div class="skill">
            <h2>能力描述</h2>
            <p><b>技术能力</b><br>熟练掌握HTML,CSS,JavaScript <br><br><b>综合能力</b><br>良好的沟通，主动积极，努力勤奋</p>
        </div>
        <div class="education">
            <h2>教育经历</h2>
            <p><b>本科</b><br>百度前端技术学院小薇学院<br><br><b>研究生</b><br>百度前端技术学院大斌学院</p>
        </div>
        <div class="project">
            <h2>项目经历</h2>
            <p><b>小度小度</b><br>作为前端工程师角色参与了ABC组件的开发<br><br><b>SAN Doc</b><br>作为文档工程师参与了SAN Doc的编写</p>
        </div>
    </div>
</body>
</html>

第一个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等属性来完成布局。

gucheng86

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端学院学习Day2

前言昨天，了解了Web开发的基本原理，使用html制作了简易的简历，以及编写css为文本和字体添加属性。 4.背景、边框、列表、链接和选择器目标掌握CSS稍复杂的选择器，还有背景、边框等样式属性。阅读W3School-背景 W3School 边框 W3SChool 列表 W3School 链接选择器的优先级编码...
复制链接

扫一扫