Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基本属性-伸缩盒及浮动导航
Blogger Information
Blog 70
fans 1
comment 0
visits 53068
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css基本属性-伸缩盒及浮动导航
葡萄枝子
Original
552 people have browsed it

css基本属性-伸缩盒及浮动导航

css基本属性

  1. <!DOCTYPE html>
  2. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /* 字体，大小，粗细，字形 */
  11.         p:nth-child(1) {
  12.             font-family: 'Courier New', Courier, monospace;
  13.             font-size: 16px;
  14.             font-weight: bold;
  15.             font-style: italic;
  16.         }
  18.         /* 字符间距 */
  19.         p:nth-child(2) {
  20.             letter-spacing: .5rem;
  21.         }
  23.         /* 单词间距 */
  24.         p:nth-child(3) {
  25.             word-spacing: .5rem;
  26.         }
  28.         /* 透明度 */
  29.         p:nth-child(4) {
  30.             opacity: .3;
  31.         }
  33.         /* 内容溢出 scroll 滚动，auto 自动 */
  34.         p:nth-child(5) {
  35.             width: 70px;
  36.             height: 35px;
  37.             overflow-y: hidden;
  38.             border: 1px solid olive;
  39.             background-color: #ccc;
  40.         }
  42.         /* 文字同一行显示，超出隐藏，溢出文本显示省略号 */
  43.         p:nth-child(6) {
  44.             width: 90px;
  45.             overflow-x: hidden;
  46.             white-space: nowrap;
  47.             text-overflow: ellipsis;
  48.         }
  50.         /* 内容居中 */
  51.         p:nth-child(7) {
  52.             width: 200px;
  53.             height: 50px;
  54.             background-color: palevioletred;
  55.             border: 1px solid purple;
  56.             text-align: center;
  57.             line-height: 50px;
  58.         }
  60.         /* 文本修饰 */
  61.         p:nth-child(8) {
  62.             background-color: #ccc;
  63.             /* 文本缩进 */
  64.             text-indent: 2rem;
  65.             width: 120px;
  66.             /* 长单词超过边界换行 */
  67.             word-wrap: break-word;
  68.         }
  70.         p:nth-child(8)>span {
  71.             /* 红色下划线  */
  72.             text-decoration: underline red;
  73.             /* 删除线 */
  74.             /* text-decoration: line-through purple; */
  75.         }
  76.         ul {
  77.             list-style-type:decimal;
  78.         }
  80.         body{
  81.             /* 等价 */
  82.             /* background-color: #f6f6f6;
  83.                 background-image: url(https://www.w3school.com.cn/i/eg_bg_01.gif);
  84.                 background-repeat: no-repeat;
  85.                 background-position: center;
  86.                 background-attachment: fixed; */
  87.             background: #f6f6f6 url(https://www.w3school.com.cn/i/eg_bg_01.gif) no-repeat center fixed;
  88.         }
  89.         body>ul{
  90.             width:200px;
  91.             /* 转有序列表 */
  92.             list-style: decimal;
  93.             /* list-style: inside url(https://www.w3school.com.cn/i/eg_arrow.gif); */
  94.             /* 等价 */
  95.             list-style-position: inside;
  96.             list-style-image: url(https://www.w3school.com.cn/i/eg_arrow.gif);
  97.         }
  98.         body>ul>li{
  99.             background-color: salmon;
  100.             padding: 8px;
  101.         }
  102.     </style>
  103. </head>
  105. <body>
  106.     <p>Test text one.</p>
  107.     <p>Test text two.</p>
  108.     <p>Test text three.</p>
  109.     <p>Test text four.</p>
  110.     <p>Test text five.</p>
  111.     <p>Test text six.</p>
  112.     <p>Test text seven.</p>
  113.     <p>test <span>texttesttesttexttest</span> eight.</p>
  114.     <ul>
  115.         <li>list-style-one</li>
  116.         <li>list-style-two</li>
  117.         <li>list-style-three</li>
  118.     </ul>
  119. </body>
  121. </html>

css基本属性

伸缩盒及浮动定位导航

  1. <!DOCTYPE html>
  2. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         body>header {
  11.             margin: 0 auto;
  12.             width: 600px;
  13.         }
  15.         nav>ul {
  16.             display: flex;
  17.             height: 35px;
  18.             justify-content: center;
  19.             align-items: center;
  20.             background-color: thistle;
  21.         }
  23.         nav>ul>li {
  24.             padding: 5px 10px;
  25.             position: relative;
  26.         }
  28.         ul>li {
  29.             list-style: none;
  30.         }
  32.         ul>li>ul {
  33.             position: absolute;
  34.             left: -30px;
  35.             top: 32px;
  36.             width: 70px;
  37.             display: none;
  38.         }
  40.         ul>li:hover>ul {
  41.             display: block;
  42.         }
  44.         ul>li>ul>li {
  45.             background-color: tomato;
  46.             padding: 5px 8px;
  47.         }
  49.         ul>li>ul>li:hover {
  50.             background-color: violet;
  51.         }
  52.     </style>
  53. </head>
  55. <body>
  56.     <header>
  57.         <nav>
  58.             <ul>
  59.                 <li><a href="" title="首页">首页</a></li>
  60.                 <li><a href="" title="分类">分类</a>
  61.                     <ul>
  62.                         <li>分类一</li>
  63.                         <li>分类二</li>
  64.                         <li>分类三</li>
  65.                     </ul>
  66.                 </li>
  67.                 <li><a href="" title="标签">标签</a></li>
  68.                 <li><a href="" title="留言">留言</a></li>
  69.             </ul>
  70.         </nav>
  71.     </header>
  72. </body>
  74. </html>

伸缩盒浮动导航

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post