文章目录

重置、去电小数点、链接无下划线和变黑
字体大小、字体颜色
- 小练习1：
选择器
div
- 小练习2：
div叠加
列表:
填充
- 小练习3：
- 作业1：
- 作业2：

重置、去电小数点、链接无下划线和变黑

 <head><meta charset="UTF-8"><title></title><style>*{  /*重置*/margin: 0;padding: 0;font-size: 12px;}ul{list-style: none;/*去掉小点*/padding: 0;}a{ /*无下划线和变成黑色*/text-decoration: none;color: black;}</style></head><body><p>sfgh</p><p>ertyuh</p><h1>rty</h1><h2>wye</h2><h3>cvb</h3><ul><li>dfg</li><li>eri</li><li>xcj</li></ul><br /><a href="aaa.html">百度</a></body>

下面为运行结果：

字体大小、字体颜色

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>111</title><style>h1{font-size: 20px;/*字体大小*/color: red;/*字体颜色*/}/*css,大括号很重要！*/p{color: red;}.word{color: blueviolet;}#txt{color: blue;}p strong{color: red;}/*只有在p中的strong变红*/</style></head><body><h1>学习使我快乐！</h1><h2 class="word">学海无涯苦作舟</h2><h1>ghyft</h1><p>段落</p><h3 class="word">学海无涯</h3><p id="txt">段段段段段落</p><p><strong>文字</strong></p><strong>文字</strong></body>
</html>

下面为运行结果：

小练习1：

<html><head><meta charset="UTF-8"><title>破阵子</title><style>h1{font-size: 18px;color: red;}.word{font-size: 12px;color: red;}.fill{font-size: 12px;}</style></head><body><h1>破阵子·为陈同甫赋壮词以寄之</h1><hr /><p class="word">醉里挑灯看剑，梦回吹角连营。<br />八百里分麾下炙，五十弦翻塞外声。<br />沙场秋点兵。<br /></p><p class="fill">马作的卢飞快，弓如霹雳弦惊。<br />了却君王天下事，赢得生前身后名。<br />可怜白发生!<br /></p></body>

下面为运行结果：

选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>选择器</title><link href="css/demo1.css" type="text/css" rel=""/></head><body><p style="color: blue;">sdfghj</p><strong>dfghjkmnb</strong><br /><em>wertyui</em></body>
</html>

下面为运行结果：

div

<html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 50px;border: 1px solid;/*padding-right: 20px;*//*padding: 20px 50px;*//*上下，左右*/padding: 20px 50px 10px;/*上，左右，下*/padding: 10px 20 px 30 px 40px;/*上,右,下,左*/}</style></head><body><div>sdsdsddssdsdsdsdsdsddsd<br />asdfghjdfsdfhgh</div></body>
</html>

下面为运行结果：

小练习2：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图书列表</title><style>.word{color: blueviolet;font-size: 12px;}.sdd{color: black;font-size: 15px;}</style></head><body><ol type="1"><li><img src="img/111.jpg" width="120" height="120" /><br /><p class="word">111</p><p class="sdd">456</p></li><li><img src="img/111.jpg" width="120" height="120" /><br />   <p class="word">222</p>  <p class="sdd">456</p></li><li><img src="img/111.jpg" width="120" height="120" /><br />   <p class="word">333</p>  <p class="sdd">456</p></li></ol></body>
</html>

下面为运行结果：

div叠加

<html><head><meta charset="UTF-8"><title></title><style>.div1{width: 400px;height: 300px;border: 1px solid;padding-left: 10px;padding-top: 20px;margin-bottom: 5px;/*边距*/}.div2{width: 400px;height: 50px;border: 1px solid;}</style></head><body><div class="div1">这是一个div</div><div class="div2">这是一个div</div></body>
</html>

下面是运行结果：

列表:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>ul{padding: 0;margin: 0;list-style: none;}ul li{float: left;margin-left: 10px;border: 1px solid;overflow:hidden;/*防止塌陷*/}</style></head><body><ul><li>11111</li><li>22222</li><li>33333</li><li>44444</li><li>55555</li><li>66666</li><li>77777</li><li>88888</li></ul></body>
</html>

下面是运行结果：

填充

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{widows: 20px;height: 10px;background-color: red;text-align: center;border-radius: 50%;}</style></head><body><div>2</div></body>
</html>

下面是运行结果：

小练习3：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>ul{width: 350px;height: 30px;padding-top: 5px;padding-bottom: 5px;border: 1px solid;}ul li{float: left;margin-left: 20px;border: 1px solid;overflow:hidden;font-size: 12px;}</style></head><body><ul><li>首页</li><li>服装</li><li>化妆品</li><li>电子产品</li><li>生活用品</li></ul></body>
</html>

下面是运行结果：

作业1：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>微信</title></head><style>#weixin{height: 70px;width: 70px;font-size: 20px;text-align: center;line-height: 70px;border: 1px solid green;}#center{height: 20px;width: 20px;background-color: red;text-align: center;line-height: 20px;border-radius: 50%;font-size: 14px;position: relative;top: -80px;right: -63px;}</style><body><div id="weixin">微信</div><div id="center">2</div></body>
</html>

下面是运行结果：

作业2：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>微信</title><style>#weixin{height: 70px;width: 70px;font-size: 20px;text-align: center;line-height: 70px;border: 1px solid green;position: relative;}#center{height: 20px;width: 20px;background-color: red;text-align: center;line-height: 20px;border-radius: 50%;font-size: 14px;position: absolute;top: -10px;right: -10px;}</style></head><body><div id="weixin">微信<div id="center">2</div></div></body>
</html>

下面是运行结果：

——The End

冬令营Web基础整理——Day2相关推荐

Java Web基础
目录 Java Web基础 HTML基础 HTML补充 CSS基础 CSS补充 JavaScript基础 JavaScript补充(例题) Java Web补充 Java Web基础 HTML基础标 ...
【原】移动web资源整理
[原]移动web资源整理回顾2014年,刚转来到新的部门,非常渴望做出一个所谓的成功产品,心态几乎变了,每天都忙忙碌碌在项目中,把原来阅读和学习的习惯给忽视了,作为一个技术人员,没有通过学习新的知识 ...
Web基础（三）Python Web
文章目录 Python Web基础 1. WSGI 1.1 概述 1.2 实现原理 1.WSGI Server/gateway 2.WSGI Application 3.WSGI MiddleWare ...
Web基础之Servlet+JDBC+JSP项目实战记录（一）
Web基础之Servlet+JDBC+JSP项目实战记录(一) 一.项目说明: 通过前面的学习,我们已经对Servlet有了一定的了解:接下来我们要结合数据库和JSP技术一步一步完成一个小型的动态we ...
移动web资源整理[转]
[原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题设备更新换代快--低端机遗留下问题.高端机带来新挑战浏览器厂商不统一--兼容问题多网络更复杂--弱网 ...
全栈 - 20 Web 基础网页的血肉 CSS
这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础网页的血肉CSS. HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式. 什么是CSS CSS全拼是Cascadin ...
web 向java_Java web基础
Java web基础一.C\S架构 1.概念 C是英文单词"Client"的首字母,即客户端的意思,C/S就是"Client/Server"的缩写,即&quo ...
# EXP8 Web基础
EXP8 Web基础基础问题回答 1.什么是表单? 表单:表单在网页中主要负责数据采集功能. 基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表 ...
20145233《网络对抗》Exp8 Web基础
20145233<网络对抗>Exp8 Web基础实验问题思考什么是表单? 表单在网页中主要负责数据采集功能一个表单有三个基本组成部分: 表单标签表单域:包含了文本框.密码框.隐藏域 ...

冬令营Web基础整理——Day2

文章目录

重置、去电小数点、链接无下划线和变黑

字体大小、字体颜色

小练习1：

选择器

div

小练习2：

div叠加

列表:

填充

小练习3：

作业1：

作业2：

冬令营Web基础整理——Day2相关推荐

最新文章

热门文章