ホームページ > 記事 > ウェブフロントエンド > CSS3-04 スタイル 3_html/css_WEB-ITnose
CSS3-04 スタイル 3_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:511194ブラウズ
はじめに
1. HTML5-01 の概要
2. HTML5-02 の要素
3. CSS3-01 の概要
4. HTML5-03 ページレイアウト
5. CSS3-02 スタイル 1
6. CSS3-03 スタイル2
HTMLドキュメント
关于 HTML/CSS 的博客也写了几篇了。该系列博客主要介绍 HTML 和 CSS 的基础，尚未过多的涉及 HTML5 和 CSS3 （即 HTML/CSS 进阶）的内容。这些博客是按照一定的顺序写的，尽管你可以选择性的只看其中的某篇，但是若你刚开始接触 HTML 和 CSS，那么还是建议你浏览一下前面的文章。相信这样，你会更快理解并接受 HTML 和 CSS。以下是该系列博客的顺序列表：
CSS ファイル
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-04 样式 3</title> <link rel="stylesheet" href="mystyle.css"></head><body> <div> <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/" title="博客">世俗孤岛</a> </div></body></html>
レンダリング
制御可能なリスト項目マークのスタイル
|属性|意味|
|list-style-type|リスト項目マークのタイプ|
|list-style-image|リスト項目マークを画像として設定|
|list - style-position|リスト項目のマークアップの位置|
HTML document
div{ margin: 100px 100px; width: 120px; height: 26px; text-align: center; font-size: 24px; background-color:lightpink;}a:link {text-decoration: none;}a:hover {text-decoration: underline;}a:active {text-decoration: overline;}
CSS document
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-04 样式 3</title> <link rel="stylesheet" href="mystyle.css"></head><body> <ul id="normal"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> <ul id="image"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul></body></html>
レンダリング
HTMLドキュメント
#normal{ list-style-type: square;}#image{ list-style-image: url("item_tag.png");}
CSSファイル
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-04 样式 3</title> <link rel="stylesheet" href="mystyle.css"></head><body> <table> <caption>Tabel 1-1</caption> <tr> <th>属性</th> <th>含义</th> <th>备注</th> </tr> <tr> <td>border</td> <td>边框</td> <td class="red">注意 border-collapse 属性</td> </tr> <tr> <td>padding</td> <td>填充</td> <td class="red">随便玩</td> </tr> </table></body></html>
効果画像
HTMLドキュメント
table{ width: 450px; height: 200px;}table,th,td{ border: 2px solid pink; border-collapse: collapse;}th{ background-color: lightgray;}td{ padding-left: 30px;}.red { color: red; text-align: left; vertical-align: top;}caption{ margin-top: 10px; caption-side: bottom;}
CSSファイル
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-04 样式 3</title> <link rel="stylesheet" href="mystyle.css"></head><body> <ul> <li><a href="#">客服管理</a></li> <li><a href="#">财务管理</a></li> <li><a href="#">产品管理</a></li> <li><a href="#">预约管理</a></li> </ul></body></html>
レンダリング
HTML ドキュメント
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-04 样式 3</title> <link rel="stylesheet" href="mystyle.css"></head><body> <ul> <li><a href="#">客服管理</a></li> <li> <div class="dropdown"> <a href="#" class="dropbtn">财务管理</a> <div class="dropdown-content"> <a href="#">人员分支</a> <a href="#">产品类型</a> <a href="#">资金记录</a> </div> </div> </li> <li><a href="#">产品管理</a></li> <li><a href="#">预约管理</a></li> </ul></body></html>
CSS 文件
ul{ /*取消 HTML 列表的样式*/ list-style-type: none; margin: 0; padding: 0;}li{ /*使用 浮动 实现横向导航栏*/ float: left; /*设置 导航栏 的样式*/ background-color: rgba(0,0,255,0.5);}a:link,a:visited{ /*增加可点击区域*/ display: block; width: 150; /*设置文本样式*/ font-size: 20px; font-weight: bold; text-align: center; text-decoration: none; color: orange; /*设置 填充宽度*/ padding: 7px;}a:hover,a:active{ background-color: blue;}/*默认隐藏下拉菜单*/.dropdown-content { display: none; background-color: lightgray;}/*显示下拉菜单*/.dropdown:hover .dropdown-content{ display: block;}
效果图
关于 CSS 的介绍已经差不多了，但是总感觉还是很无力，还是不能随心所欲的控制 HTML 元素。是的，对于 HTML 元素的布局，我们还没涉及到，还不知道如何设置一个 HTML 元素的位置。还是不要着急的好，先回顾一下前几篇 Blog 中的知识，整理整理思路。在接下来的 Blog，我会介绍如何使用 CSS 布局 HTML 元素，敬请期待！Blog 中多有不足之处，望请大家多多指点。谢谢！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。