任务二（Html Css简单学习与知识整理）

来源：互联网发布：开淘宝店铺步骤图片编辑：程序博客网时间：2024/05/19 19:32

一.html几个标签

<em>斜体

<q>短文本引用；<blockquote>长文本引用；

&gt >;&lt <;&amp and;&quot ";

有些标签中含有title属性，这个是鼠标划过时会在那个区域显示title里面的内容，例如<a>标签

二.Css相关整合

1.内部样式>内联样式>外部样式(<link href="外部的css" rel="stylesheet" type="text/css"/>)

2.选择器

1)类选择器可以多次使用，但是ID选择器只能使用一次

2)同一标签可以有不同的类选择器，即可以有并列的多个类选择器，但ID选择器只能有一个。

3)子选择器：类/ID选择器>标签（父类标签所包含的第一代后代标签）

类/ID选择器标签（父类标签所包含的所有后代标签）

4)通用选择器 : *{}

5)ID选择器>类选择器>标签选择器

3.段落排版：

加粗:font-weight: blod;

斜体:font-style:italic;

缩进:text-indent:2em;

text-decoration:underilne/line-through/none;

中文字间距:letter-spacing:xx px;

单词间距：word-spacing:xx px;

4.盒模型

padding border margin(上右下左)

border-style:dashed(虚线)/dotted(点线)/solid(实线)

5.布局

postion:fixed/absolute(相对于父类标签)/relative(相对于自身位置);

另附百度前端学院小薇学院任务二代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>baidu_task2_1</title>
<styletype="text/css">
body {
margin: 0;
padding: 0;
}
#top {
margin: 0;
height: 60px;
background-color: #363636;
}
#image {
float: left;
}
#link {
float: right;
}
#top img {
width: 50px;
height: 40px;
margin: 10px auto;
}
#top ul {
text-align: left;
list-style: none;
}
#top ul li {
float: left;
margin-right: 20px;
}
#top a {
color: white;
text-decoration: none;
}
#top .import {
color: #b0b0b0;
}
p {
text-indent: 2em;
font-family: "楷书";
font-size: 16;
font-weight: bold;
}
#title1,
#title2,
#title3,
#title4,
#title5,
#bottom {
margin: auto;
padding: 30px30px;
}
#title1 {
border: 20px solid #b0b0b0;
}
#title2,
#title3,
#title4,
#title5,
#bottom {
border-top-width: 0;
border-bottom-width: 20px;
border-left-width: 20px;
border-right-width: 20px;
border-style: solid;
border-color: #b0b0b0;
}
#title1 p image {
margin: 020px;
}
#title2 p image {
margin: 020px;
}
#title2 ul li {
list-style: none;
}
#title3 #img {
margin: 20px;
width: 200px;
height: 200px;
text-align: center;
border: 1px solid black;
}
ol li,
#title4 lable {
font-weight: bold;
}
#title4 table {
border-collapse: collapse;
width: 100%;
}
#title4 table th {
background-color: black;
color: white;
}
#sum {
background-color: #b0b0b0;
color: black;
}
#title5 table {
font-size: 12;
font-family: "仿宋";
margin-left: 400px;
font-weight: bold;
}
#submit {
width: 100%;
background-color: gray;
height: 40px;
color: white;
border-radius: 12px;
}
textarea {
width: 300px;
height: 200px;
}
#word {
text-align: right;
}
#reminder {
text-align: center;
color: red;
}
#bottom {
clear: both;
margin-bottom: 0;
border: 0;
background-color: #363636;
text-align: center;
}
#header {
padding: 10px;
border-left: 4px solid darkgary;
}
</style>
</head>

<body>
<div id="top">
<div id="image">
<img src="G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg"></img>
</div>
<div id="link">
<ul>
<li><ahref="http://ife.baidu.com">导航链接一</a></li>
<li><ahref="http://ife.baidu.com">导航链接二</a></li>
<li><ahref="http://ife.baidu.com">导航链接三</a></li>
<li><ahref="http://ife.baidu.com"class="import">导航链接四</a></li>
</ul>
</div>
</div>
<div id="title1">
<h2>生活日志</h2>
<h3>简单记录最近的状态</h3>
<lable>邱晨 2017.05.24</lable>
<p>本来是想说可以写点自己的状态啥的，但是我觉得还是写这是一个很长很长的段落来的更快捷简单，所以接下来就是...
<br>换行了<br> 这是一个很长很长的段落,这是一个很长很长的段落,换行了<br> 这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,
<a href="http://ife.baidu.com">这是一个连接到百度前端学院的链接</a>这是一个很长很长的段落这是一个很长很长的段落这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,应该已经够长了吧.<br>
<imagesrc="G:\大三下Java代码\前端引用的图片\baidu_task1\2.jpg"height="300px"width="300px"></image><br> 继续很长的段落话题，这是一个很长很长的段落, 这是一个很长很长的段落这是一个很长很长的段落, 这是一个很长很长的段落这是一个很长很长的段落, 这是一个很长很长的段落</p>
</div>
<div id="title2">
<h2>另一篇文章</h2>
<h3>继续我的胡说八道</h3>
<lable>邱晨 2017-05-24</lable>
<p>继续这是一个很长很长的段落之旅....
<br>换行了<br> 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落,换行了
<br><strong>这是加粗了的字体</strong> 这是一个很长很长的段落, 这是一个很长很长的段落, 这是一个很长很长的段落
<a href="http://ife.baidu.com">这是一个连接到百度前端学院的链接</a>这是一个很长很长的段落, 这是一个很长很长的段落
</p>
<imagesrc="G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg"height="300px"width="300px"></image>
<ul>
<li>序号1</li>
<li>序号2</li>
<li>序号3</li>
</ul>
</div>
<div id="title3">
<div>
<h2>图片</h2>
</div>
<div id="img">
<h3>好看的图片</h3>
<imagesrc="G:\大三下Java代码\前端引用的图片\baidu_task1\1.jpg"height="100px"width="100px"></image><br>
</div>
<div id="img">
<h3>好看的图片</h3>
<imagesrc="G:\大三下Java代码\前端引用的图片\baidu_task1\3.jpg"height="100px"width="100px"></image>
</div>
</div>
<div id="title4">
<h2>最后一篇文章</h2>
<h3>继续我的胡说八道</h3>
<ol>
<li>考试排名1</li>
<li>考试排名2</li>
<li>考试排名3</li>
</ol>
<lable>下面是一个表格,我这里给表格添加了"borfer=1"好让你看出十个表格</lable>
<tableborder="1">
<tr>
<th>姓名</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>小明</td>
<td>2000</td>
<td><ahref="http://ife.baidu.com">修改</a></td>
</tr>
<tr>
<td>小红</td>
<td>3000</td>
<td><ahref="http://ife.baidu.com">修改</a></td>
</tr>
<tr id="sum">
<td>总计</td>
<td colspan="2">5000</td>
</tr>
</table>
</div>
<div id="title5">
<div id="header">
<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
</div>
<form>
<table>
<tr>

<td id="word">请输入邮箱地址：</td>
<td><input type="text" value="这是一个文本输入框" /></td>
</tr>
<tr>
<td colspan="2" id="reminder">邮箱地址请按要求格式输入</td>
</tr>
<tr>
<td id="word">请输入密码：</td>
<td><inputtype="text"value="这是一个文本输入框" /></td>
</tr>
<tr>
<td id="word">请重复输入密码：</td>
<td><inputtype="text"value="这是一个文本输入框" /></td>
</tr>
<tr>
<td colspan="2" id="reminder"> 密码请为6-16位英文数字</td>
</tr>
<tr>
<td id="word">性别：</td>
<td><inputtype="radio"name="sex" value="0" checked="checked" />男<inputtype="radio"name="sex" value="1" />女</td>
</tr>
<tr>
<td id="word">城市:</td>
<td>
<select>
<option> --请选择--</option>
<option>北京</option>
<option>南京</option>
<option>上海</option>
</select>
</td>
</tr>

<tr>
<td id="word">爱好：</td>
<td>
<inputtype="checkbox" />运动
<inputtype="checkbox" />艺术
<inputtype="checkbox" />科学
</td>
</tr>
<tr>
<td id="word">个人描述：</td>
<td><textarea value="">这是一个输入框，请输入你的个人描述</textarea><br></td>
</tr>
</table>
<inputtype="submit"value="确认提交"id="submit" />
</form>
</div>
<div id="bottom">
<lable>版权所属---阿晨</lable>
</div>
</body>

</html>

阅读全文

0 0