【html】实时热点（背景渐变，绝对位置图片，空超链接，虚线边框，标题前标识） |
您所在的位置：网站首页 › dw中热点链接 › 【html】实时热点（背景渐变，绝对位置图片，空超链接，虚线边框，标题前标识） |
|
效果图 样式表 *{ margin: 0; padding: 0; } .box{ width: 250px; border: 1px solid rgb(210, 210, 210); border-radius: 10px; padding-bottom: 15px; background: linear-gradient(top, rgb(160, 218, 239), white); background: -ms-linear-gradient(top, rgb(160, 218, 239), white); background: -webkit-linear-gradient(top,rgb(160, 218, 239), white); background: -moz-linear-gradient(top, rgb(160, 218, 239), white); background-size: 100% 100%; } h4{ font-size: 18px; color: white; height: 40px; padding-left: 50px; line-height: 40px; } hr{ margin-bottom:10px; } ul li{ height: 30px; line-height: 30px; list-style:none ; margin-right: 25px; margin-left: 12px; border-bottom: 1px dashed rgb(124, 124, 124); } ul li::before { content: ''; display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid transparent; border-left: 4px solid red; } a{ text-decoration: none; color: #888888; margin-left: 5px; } a:hover{ font-size: 24px; }主体部分 实时热点 华盛顿大规模游行 任正非卸任副董事 中国IT领袖峰会 欧文手术宣布成功 京城迎最佳赏花期文字图片顶格开始 *{ margin: 0; padding: 0; }设置背景颜色渐变（样式表中，从上到下从浅蓝到白） background: linear-gradient(top, rgb(160, 218, 239), white); background: -ms-linear-gradient(top, rgb(160, 218, 239), white); background: -webkit-linear-gradient(top,rgb(160, 218, 239), white); background: -moz-linear-gradient(top, rgb(160, 218, 239), white);图片使用绝对位置固定（绝对位置，距左边距，调整大小，距上边距） 加白色横线 灰色虚线（样式表中，设置下边框是灰色虚线） ul li::before { content: ''; display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid transparent; border-left: 4px solid red; }标题前标识（样式表中） border-bottom: 1px dashed rgb(124, 124, 124); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |