22.2.5. css设置举例 ¶

css边框模型.css

/*CSS 边框属性1*/
p.one
{
    border-style:solid;
    border-width:3px;
    border-color:red;
}

/*CSS 边框属性2*/
p.two
{
    border-style:solid;
    border-width:medium;
    border-color:#98bf21;
}
/*CSS 边框属性3*/
p.three
{
    border-style:solid;
    border-width:1px;
}


/*css外边框属性*/
p.four
{
    border:1px solid red;
    outline:green dotted thick;
}


/*css 填充*/
p
{
    background-color:white;
}

p.padding
{
    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
}

/*浮动*/
img
{
    float:right;
}



/*下拉菜单*/
  .dropdown {
      position: relative;
      display: inline-block;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
  }

  .dropdown:hover .dropdown-content {
      display: block;
  }

html测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css边框模型.css">
</head>
<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
<p class="four"> 在边框的周围画线.............</p>
<p class="padding">This is a paragraph with specified paddings.</p>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
    <span>鼠标移动到我这！</span>
    <div class="dropdown-content">
        <p>W3Cschool教程</p>
        <p>www.w3cschool.cn</p>
    </div>
</div>

<img src="10063W505-6.png" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。

</body>
</html>

22.2.5. css设置举例¶

22.2.5. css设置举例 ¶