zoukankan html css js c++ java

【CSS】网页样式记录

一、按钮

p.tiy {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 10px;
    vertical-align: middle;
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgb(233, 104, 107);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 2px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 2px;
    font-family: 微软雅黑;
    border- initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: 0px;
    padding: 8px 18px;
    overflow: hidden;
    transition: 0.2s ease-out;
    border-radius: 2px;
}

测试代码：

<html>
<head>
<style>
p.tiy {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 10px;
    vertical-align: middle;
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgb(233, 104, 107);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 2px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 2px;
    font-family: 微软雅黑;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: 0px;
    padding: 8px 18px;
    overflow: hidden;
    transition: 0.2s ease-out;
    border-radius: 2px;
}
</style>

</head>
<body>
<p class="tiy">
<a href="http://www.baidu.com">试一试</a>
</p>
</body>
</html>

二、圆角矩形

div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
250px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}

测试代码：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:250px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>

<div>这是个圆角矩形哦</div>

</body>
</html>

三、表格

  <table border="1"  cellpadding="2"  cellspacing="0" >
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

四、还是表格

    <style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}   
        table th{background:#777777;}
    </style>

    <table >
        <tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>

五、菜单栏

CSS:

* {
  margin: 0;
  padding: 0;
}

/*body {*/
  /*font: 300 14px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;*/
  /*background: #f5f5f5;*/
/*}*/

ul {
  background: #fff000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap; /* 避免文字換行 */
}
ul li {
  position: relative; /* 使子選單依照母選單的座標顯示 */
}
/* 設定母選單的連結樣式 */
ul li a {
  text-decoration: none;
  color: #777;
  padding: 10px 20px;
  display: block;
  background: bottom right no-repeat;
}
/* 當母選單下沒有子選單時，也就是說只有一個連結時，隱藏detail.png */
ul li a:only-child {
  background: none;
}
ul li:hover {
  background-color: indianred;
}
ul li:hover > a {
  color: #fff;
}
ul li:hover > ul {
  display: block; /* 滑鼠滑入母選單後，顯示子選單 */
}
nav > ul > li {
  display: inline-block; /* 使一級選單排成一橫列 */
}
/* 二級選單顯示於一級選單的正下方 */
ul ul {
  position: absolute;
  top: 100%;
  list-style: none;
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  display: none;
}
/* 三級選單則顯示於二級選單的右方 */
ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

Html:

<nav style="position: relative; top: 180px">
        <ul>
            <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">所有分类</a>
                <ul>
                    <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">所有宝贝</a></li>
                    <li><a href="https://shop108592958.taobao.com/category-1225045422.htm?" target="_self">动漫服装</a>
                        <ul>
                            <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">彩印卫衣</a></li>
                            <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">纯棉卫衣</a></li>
                            <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">彩印T恤</a></li>
                            <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">纯棉T恤</a></li>
                            <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">抱枕</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="https://shop108592958.taobao.com/" target="_self">首页</a></li>
            <li><a href="https://shop108592958.taobao.com/" target="_self">动漫服装</a>
                  <ul>
                        <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">彩印卫衣</a></li>
                        <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">纯棉卫衣</a></li>
                        <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">彩印T恤</a></li>
                        <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">纯棉T恤</a></li>
                        <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">抱枕</a></li>
                  </ul>
            </li>
            <li><a href="https://shop108592958.taobao.com/" target="_self">动漫分类</a>
            </li>
            <li><a href="https://shop108592958.taobao.com/" target="_self">新品上市</a>
                <ul>
                    <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">2017年11月-12月</a></li>
                    <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">2017年9月-10月</a></li>
                    <li><a href="https://shop108592958.taobao.com/search.htm?" target="_self">2017年7月-8月</a></li>
                </ul>
            </li>
        </ul>
    </nav>

查看全文

相关阅读:
[LeetCode 1029] Two City Scheduling
POJ 2342 Anniversary party （树形DP入门）
Nowcoder 106 C.Professional Manager(统计并查集的个数)
2018 GDCPC 省赛总结
 CF 977 F. Consecutive Subsequence
Uva 12325 Zombie's Treasure Chest （贪心，分类讨论）
Poj 2337 Catenyms（有向图DFS求欧拉通路）
POJ 1236 Network of Schools (强连通分量缩点求度数)
POJ 1144 Network （求割点）
POJ 3310 Caterpillar（图的度的判定）

原文地址：https://www.cnblogs.com/mqxs/p/7890201.html