【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章主要介绍网页样式布局的基础知识,包 ...
随机推荐
- Capterra Software Categories
https://www.capterra.com/categories this software categories is valuable.
- Nexus 搭建maven 私有仓库
nexus如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库下载构件无疑加大了仓库的负载和浪费了外网带宽,如 ...
- 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies
在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...
- 关于RAID_1+0和RAID_0+1的比较
RAID的概念就不多说了,说说 RAID 0 和 RAID 1 . RAID 0 是条带存储,叠加所有硬盘容量,因此不具有容错性,原理如下图所示: RAID 1 使用非常原始的方式(复制一份.镜像)进 ...
- 针对后台TCP服务F5健康检查配置
1.TCP-HALF-OPEN方式 TCP-HALF-OPEN的探测方式,实际是F5每隔一个固定的时间,发送一个SYN包给资源池pool中的一个member,等待服务器返回SYN_ACK,在收到SYN ...
- php类库安装xml
问题 报错:Call to undefined function dom_import_simplexml() yum install php-dom service restart httpd 参考 ...
- C# Dictionary通过value获取对应的key值
1:最直白的循环遍历方法,可以分为遍历key--value键值对以及所有的key两种表现形式 2:用Linq的方式去查询(当然了这里要添加对应的命名空间 using System.Linq) 如下为一 ...
- JAVA-JSP内置对象
相关资料:<21天学通Java Web开发> request 请求对象 类型javax.servlet.ServletRequest 作用域Requestresponse 响应对象 类型j ...
- 3. EM算法-高斯混合模型GMM
1. EM算法-数学基础 2. EM算法-原理详解 3. EM算法-高斯混合模型GMM 4. EM算法-高斯混合模型GMM详细代码实现 5. EM算法-高斯混合模型GMM+Lasso 1. 前言 GM ...
- 基于jQuery图片自适应排列显示代码
基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...