HTML菜鸟入门6

来源：互联网发布：java开发文档怎么写编辑：程序博客网时间：2024/06/05 08:41

去除body样式默认边框

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>无标题文档</title><style>body{margin:0;}//去除body样式中默认的8px外边框body{border:1px solid red;}</style></head><body><a href="#">a标签（链接，下载，锚点）</a><img src="1.png" alt="猫咪"/><a href="#"><img src="1.png" alt="猫咪"/></a><span>区分样式</span><strong>强调(粗体)</strong><em>强调(斜体)</em><p>段落</p><div>块</div><ol><li>列表1</li><li>列表2</li><li>列表2</li></ol><ul><li>列表1</li><li>列表2</li><li>列表2</li></ul><dl><dt>定义列表标题</dt><dd>定义列表项1</dd><dd>定义列表项2</dd><dd>定义列表项3</dd></dl></body></html>

默认的body样式（注意外边框）：
这里写图片描述
去除外边框的body样式：

通过群组样式将边框去除

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>无标题文档</title><style>body,p,h1,h2{margin:0;}//通过群组样式将标签默认边框去除body{border:1px solid red;}</style></head><body><a href="#">a标签（链接，下载，锚点）</a><img src="1.png" alt="猫咪"/><a href="#"><img src="1.png" alt="猫咪"/></a><span>区分样式</span><strong>强调(粗体)</strong><em>强调(斜体)</em><p>段落</p><div>块</div><h1>标题1</h1><h2>标题2</h2><ol><li>列表1</li><li>列表2</li><li>列表2</li></ol><ul><li>列表1</li><li>列表2</li><li>列表2</li></ul><dl><dt>定义列表标题</dt><dd>定义列表项1</dd><dd>定义列表项2</dd><dd>定义列表项3</dd></dl></body></html>

清除ol、ul的默认样式

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>无标题文档</title><style>body,p,h1,h2{margin:0;}body{border:1px solid red;}ol,ul{list-style:none;}//清除列表项</style></head><body><ol><li>列表1</li><li>列表2</li><li>列表2</li></ol><ul><li>列表1</li><li>列表2</li><li>列表2</li></ul><a href="#">a标签（链接，下载，锚点）</a><img src="1.png" alt="猫咪"/><a href="#"><img src="1.png" alt="猫咪"/></a><span>区分样式</span><strong>强调(粗体)</strong><em>强调(斜体)</em><p>段落</p><div>块</div><h1>标题1</h1><h2>标题2</h2><dl><dt>定义列表标题</dt><dd>定义列表项1</dd><dd>定义列表项2</dd><dd>定义列表项3</dd></dl></body></html>

清除样式后：
这里写图片描述

去除a标签默认的文本修饰

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>无标题文档</title><style>body,p,h1,h2{margin:0;}body{border:1px solid red;}ol,ul{list-style:none;}//清除列表项a{text-decoration:none;}//清除a标签默认的文本修饰</style></head><body><a href="#">a标签（链接，下载，锚点）</a><ol><li>列表1</li><li>列表2</li><li>列表2</li></ol><ul><li>列表1</li><li>列表2</li><li>列表2</li></ul><img src="1.png" alt="猫咪"/><a href="#"><img src="1.png" alt="猫咪"/></a><span>区分样式</span><strong>强调(粗体)</strong><em>强调(斜体)</em><p>段落</p><div>块</div><h1>标题1</h1><h2>标题2</h2><dl><dt>定义列表标题</dt><dd>定义列表项1</dd><dd>定义列表项2</dd><dd>定义列表项3</dd></dl></body></html>

效果：这里写图片描述

阅读全文

0 0