前言:
今天老师说需要学一点前端的知识,于是乎,我们花了一天的时间学了一点前端,今天的故事由此开启!!!
web中的HTML CSS
HTML
HTML : HyperText Markup Language(全称) 中文名是:超文本标记语言
页面的结构为:首行声明文档类型(<!DOCTYPE html>)-->根标记(<html></html>)>头部标记/主体标记<body></body>
标签-->div 是web中最常用,最重要的一个标签,往往一个高级前端工程师,可以非常灵活的运用div标签
span-->是一个块级标签不会自动换行,不能设置宽高用来存放文本信息
br-->换行标签
style-->风格/样式 经常写于title标签下,用作内联样式.
meta-->元 元数据 设置字符编码集
属性-->标签中内部的id class type charset style等
CSS
CSS-->Cascading Style Sheets的缩写 , 中文名 : 层叠样式表
选择器
三种基本选择器-->ID选择器,类选择器,标签选择器
ID选择器的语法: #ID名{}
类选择器的语法: .class名{}
标签选择器的语法: 标签名{}
样式
height-->高度
width-->宽度
background-image-->背景图片
这里边的"url"表示的是图片的路径
background-color-->背景颜色
颜色的表达方式有很多种,这里的#ffffff是其中一种,代表白色
background-size-->背景图片的尺寸
我这里使用了百分比(%),还可以使用像素(px)
background-repeat-->属性设置是否及如何重复背景图像,这个如果不设置的话,背景图片会重复平铺在元素中
font-size-->设置不同的 HTML 元素的尺寸
我这里设置的是文字的大小
font-weight-->设置字体的粗细
font-family-->设置字体
这里直接把字体的名称放在最后的双引号里就行
margin-->间距
margin-bottom-->下间距
display-->使段落生出行内框
position-->定位元素
这里就是相对定位
relative-->相对定位
absolute-->绝对定位
这里就是绝对定位
left-->元素与父元素左边的距离
top-->元素与父元素上边的距离
border-radius-->向元素添加圆角边框
当设置的值为50%时,所表现出来的图形为圆形
overflow-->清除浮动
这里需要注意的是,当子元素设置了相对定位,并且用百分比表示时,父元素必须设置宽和高
总结:
在快捷键 Ctrl+c 与Ctrl+v 的帮助下 成功写出了一张名片
附图:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长安店小二</title>
<style>
html{
height: 100%;
}
body{
background-image: url("jingcheng.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
}
.beijing{
height: 300px;
500px;
background-image: url("2011081415393399015.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
top: 25%;
left: 25%;
border-radius: 20px;
}
.logo{
color: darkorange;
font-size: 50px;
font-family: "宋体";
position: absolute;
left: 30px;
top: 8px;
}
.herder{
background-image: url(dianxiaoer.jpg);
height: 200px;
200px;
background-size: 100% 100%;
position: absolute;
right: 50px;
top: 80px;
border-radius: 50%;
}
.wenben{
position: absolute;
left: 12px;
top: 100px;
color: white;
}
</style>
</head>
<body>
<div class="beijing">
<div class="logo">
长安云来客栈
</div>
<div class="herder"></div>
<div class="wenben">
<p><h3>姓名:店小二</h3></p>
<p>职业:服务员</p>
<p>手机:***********</p>
<p>QQ:*********</p>
<p>邮箱:*********@qq.com</p>
</div>
</div>
</body>
至此,第二天的学习告一段落
ps:周末休息!!!!!!!! 靠靠靠靠靠靠靠靠靠!!!!!!! 耶耶耶耶耶耶耶耶耶!!!!!!!!!