【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-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;

}

测试代码：

<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;

width: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:;

  padding:;

}

/*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:;

}

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>

【CSS】网页样式记录的更多相关文章

Css网页样式设计
第一章概述一.CSS简介1.CSS是Cascading Style Sheets(层叠样式表单)的简称.通常所称的CSS是指CSS1,即层叠样式表单1级. 2.编辑CSS文档:与编辑HTML的方法 ...
系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用精通CSS.DIV网页样式与布局(七)——制作实用菜单精通CSS.DIV网页样式与布局(六)——页面和浏览器元素精通CSS.DIV网页样式与布 ...
详解CSS网页布局中默认字体样式
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的照片拍摄人员,我们都可以通过 ...
精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
nginx js、css、图片及一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常
nginx js.css.图片及一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...
CSS+DIV网页样式布局实战从入门到精通中文pdf扫描版
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

随机推荐

MYSQL performance
https://www.mysql.com/why-mysql/performance/ https://www.slideshare.net/oysteing/how-to-analyze-and- ...
【驱动】linux下I2C驱动架构全面分析
I2C 概述 I2C是philips提出的外设总线. I2C只有两条线,一条串行数据线:SDA,一条是时钟线SCL ,使用SCL,SDA这两根信号线就实现了设备之间的数据交互,它方便了工程师的布线. ...
设置Chrome忽略网站证书错误
本人在XP下使用Chrome.总是莫名其妙的提示整数错误,一部分https网站无法直接访问.网上找了下,把解决思路记录下来. 解决这个问题很简单,只需要修改你平时用来启动Chrome的快捷方式就可以忽 ...
LVS之NAT模型、DR模型配置和持久连接
前言:继LVS概述,本篇实现NAT模型和DR模型下的负载均衡. NAT模型: LVS-NAT基于cisco的LocalDirector.VS/NAT不需要在RealServer上做任何设置,其只要能提 ...
idea 同project添加多个module maven支持
选中新项目的pom.xml 会识别maven项目
C#中遍历Hashtable的4种方法
static void Main(string[] args) { Hashtable ht=new Hashtable(); ht.Add("); ht.Add("); ht.A ...
Faiss教程：基础
Faiss对一些基础算法提供了非常高效的实现:k-means.PCA.PQ编解码. 聚类假设2维tensor x: ncentroids = 1024 niter = 20 verbose = Tr ...
burpsuite两个变量的爱情故事
抓包的时候在攻击类型处选择[Cluster bomb] 在payload type这里设置类型为[simple list] 第一个是账号第二个是密码分批加载即可
解决Eclipse异常关闭后重启报 org.eclipse.swt.SWTException: Invalid thread access 的问题
. . . . . 很久没有写博客了,最近实在是太忙,一直想写点干货,但是一直没静下心来学习. 今天又在加班忙碌之中,结果谁知道越忙碌越出问题.先是 weblogic 没有正常启动,凭经验第一反应就是 ...
未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0
从Excel中导入数据时,提示“未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序”的解决办法操作系统:使用的是64位的Windows Server 2008 解决办法 ...

【CSS】网页样式记录

一、按钮

二、圆角矩形

三、表格

四、还是表格

【CSS】网页样式记录的更多相关文章

随机推荐

热门专题