【Web】实现动态文章列表
简单记录 -慕课网- 步骤二：动态文章列表效果
实现这个 一个网页中常见的文章列表效果。
怎么实现文章列表案例
分解一波，CSS来改变样式
标题标签
HTML的无序列表
- 去掉项目符号
- 符号所占空间
列表项目
- 设置文本内容居中
- 上边框虚线效果
<a>超链接标签- 去掉下划线样式
干就完了
用到了什么
盒子模型
盒子模型用于设计HTML页面和实现HTML页面布局
外边框 边框 内边框 内容区
一、盒子模型的边框：
1、CSS的border属性用来设置边框（dashed：虚线、solid：实线）
border : 宽度 样式 颜色 ; //border : 1px dashed black ;
2、border-top属性用来设置上边框
border-right属性用来设置右边框
border-bottom属性用来设置下边框
border-left属性用来设置左边框
二、盒子模型的内边距
1.padding属性用来设置内边距
padding : 0px;
2.margin属性用来设置外边距
margin:0px;
三、超链接
超链接就是从当前网页跳转到指定的另一个网页的链接。
1、超链接标签与属性
<a>标签表示超链接，使用href属性设置要跳转的页面地址
<a href="https://www.taobao.com">淘宝网</a>
href设置要跳转的页面地址，中间的内容区 显示在网页中的文本内容
2、超链接样式属性
1.text-align属性：设置文本内容在水平方向的对齐方式
2.line-height属性：设置文本内容所在行的高度
3.text-decoration属性：用于设置超链接的样式
text-decoration:underline; 下划线
不需要下划线的 去掉``text-decoration:none;`
4、列表
列表标签分类：
1、有序列表：列表项目使用数字进行标记（li标签在ol标签里）
<ol>：表示有序列表
<li>：表示列表的条目
项目符号：显示数字
2、无序列表：列表项目使用粗体圆点进行标记
<ul>：表示无序列表
<li>：表示列表的条目
项目符号：显示黑点
3、列表样式属性（CSS属性）：
1.list-style-type属性用来设置项目符号的形状
2.简写属性list-style效果一样
3.list-style: circle;简写属性
4.list-style-style: none 取消项目标签
编程练习
1、编程练习
参考下图，给4个盒子分别设置实线边框、虚线边框、点线边框、双线边框
效果图：
任务
1、盒子边框宽度是4px，颜色是gray
任务提示
1、实线边框（solid）、虚线边框（dashed）、点
线边框（dotted）、双线边框（double）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
float: left;
width: 200px;
height: 200px;
background: yellow;
margin: 10px;
}
.box1 {
border: 4px solid gray;
}
.box2 {
border: 4px dashed gray;
}
.box3 {
border: 4px dotted gray;
}
.box4 {
border: 4px double gray;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
2、编程练习
参考下图，给黄色盒子设置上外边距为100px、左外边距100px
效果图：
任务
1、实现黄色盒子距离父元素上外边距为100px、左外边距100px
任务提示
1、上外边距使用margin-top实现
2、左外边距使用margin-left实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 500px;
height: 500px;
border: 4px dashed red;
}
.son {
width: 200px;
height: 200px;
background: yellow;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
效果：
3、编程练习
动手实现点击链接，跳转到百度搜索页面
任务
1、点击"百度一下，你就知道吧"跳转到百度一下，你就知道吧页
2、将链接地址https://www.baidu.com添加到a标签href=""属性中
任务提示
链接地址：https://www.baidu.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<a href="https://www.baidu.com" >百度一下，你就知道吧</a>
</body>
</html>
文章列表案例实现
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章列表效果</title>
<style>
aside {
width: 200px;
height: 300px;
}
h3 {
font-size: 18px;
/* 设置字体大小 */
font-weight: 600;
/* 设置字体粗细 */
text-align: center;
/* 设置字体水平方向居中对齐 */
}
ul {
list-style: none;
/* 去掉无序列表的项目符号 */
padding: 0;
/* 去掉无序列表的项目符号所在空间 */
}
ul>li {
padding: 10px;
border-top: 1px dashed lightgrey;
/* 处理文本内容溢出后的情况 */
overflow: hidden;
text-overflow: ellipsis;
}
ul>li>a {
color: black;
text-decoration: none;
/* 去掉链接元素文本内容的下划线 */
white-space: nowrap;
/* 强制文本内容在一行显示 */
}
</style>
</head>
<body>
<!--
<aside>元素实现HTML页面侧边栏容器
-->
<aside>
<!-- 定义侧边栏的标题 -->
<h3>文章列表</h3>
<!-- 定义文章列表 -->
<ul>
<li><a href="#">设计与构建静态网站</a></li>
<li><a href="#">JavaScript基础核心语法</a></li>
<li><a href="#">DOM编程艺术</a></li>
<li><a href="#">锋利的jQuery</a></li>
<li><a href="#">Ajax异步交互技术</a></li>
<li><a href="#">HTTP网络协议</a></li>
</ul>
</aside>
</body>
</html>
效果
【Web】实现动态文章列表的更多相关文章
- Laravel建站03--建立前台文章列表和文章详情
经过了前面的开发环境搭建和数据库配置.git配置的准备工作以后,现在可以开始动作做点什么了. 先从简单的开始,那就先来个文章列表和详情页吧. 这期间可以学习到路由.建立model.controller ...
- 基于.NetCore开发博客项目 StarBlog - (23) 文章列表接口分页、过滤、搜索、排序
前言 上一篇留的坑,火速补上. 在之前的第6篇中,已经有初步介绍,本文做一些补充,已经搞定这部分的同学可以快速跳过,基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列 ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表
显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据 目录 ASP.N ...
- TCP/IP协议学习(七) 基于C# Socket的Web服务器---动态通讯实现
目录 (1).基于Ajax的前端实现 (2).Web服务器后端处理 一个完整的web服务器,不仅需要满足用户端对于图片.文档等资源的需求:还能够对于用户端的动态请求,返回指定程序生成的数据.支持动态请 ...
- 从零开始，做一个NodeJS博客（二）：实现首页-加载文章列表和详情
标签: NodeJS 0 这个伪系列的第二篇,不过和之前的几篇是同一天写的.三分钟热度貌似还没过. 1 静态资源代理 上一篇,我们是通过判断请求的路径来直接返回结果的.简单粗暴,缺点明显:如果url后 ...
- DTCMS自定义标签，获取所有栏目文章列表TOP，以及文章通用URL
网站最近更新等地方,发现DTCMS没有获取所有栏目文章列表的标签,只能自己写 思路:获取所有栏目文章列表不难,难点在于linkurl的写法 1.制作获取所有文章列表标签 DTcms.Web.UI\La ...
- Atitit 最近资料文章列表r9 r8 月份 attilax总结
Atitit 最近资料文章列表r9 r8 月份 attilax总结 atitit tag标签标示规范 attilax总结 v2 r922.docx 2017-09-28 02:04 阅读(27) ...
- 配合dedecms内容模型实现后台输入栏目id前端输出文章列表
为了简化开发的工作量,也方便编辑快速操作,决定将后台进行重新设置.配合dedecms内容模型实现后台输入栏目id前端输出文章列表,这样制作科室专题页也变快了很多.比如,我们添加一个“科室专家栏目id” ...
- KVM虚拟化学习笔记系列文章列表（转）
Kernel-based Virtual Machine KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之k ...
随机推荐
- 把java编译成exe和安装包
由于某些项目甲方迟迟不结算尾款,这就很烦,只能想一些办法 我们知道java,python之类的代码是没有隐私可言的,那么怎么办,总要发给甲方验收,这就要做一些操作来确保自己的利益. 通过在源代码里加上 ...
- 微信小程序api拦截器
微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...
- 算法（Java实现）—— 二分搜索算法
二分搜索算法 有序数列才可用二分查找算法 思路分析 思路分析 首先确定该数组的中间下标mid = (left + right)/ 2 然后让需要查找的数findVal和arr[mid]比较 findV ...
- windows 上的MySQL默认字符集设置踩过的坑
前言: 前几天刚买了新电脑,装上MySQL有几天了,今天没事试了一下,发现默认字符集没有修改,还是默认的latin1,折腾了大半天,终于搞好了. 这是我成功设置后的结果图: 命令式直接在MySQL界面 ...
- ADF 第五篇：转换数据
映射数据流(Mapping Data Flow)的核心功能是转换数据,数据流的结构分为Source.转换和Sink(也就是Destination),这种结构非常类似于SSIS的数据流. 在数据流中,数 ...
- 老哥你能写篇 SpringCloud Alibaba 全家桶吗？ 看视频太累 太枯燥了 ！
最喜欢的一句话: 1.01的365次方=37.78343433289 >>>1 0.99的365次方= 0.02551796445229, 每天进步一点点的目标,贵在坚持 前端时间有 ...
- 真香！Python十大常用文件操作，轻松办公
日常对于批量处理文件的需求非常多,用Python写脚本可以非常方便地实现,但在这过程中难免会和文件打交道,第一次做会有很多文件的操作无从下手,只能找度娘. 本篇文章整理了10个Python中最常用到的 ...
- Python将word文档批量转PDF
前面有一篇<Python批量创建word文档(2)- 加图片和表格>的文章,利用这篇文章创建的word文档来批量转PDF文档.代码: 1 ''' 2 #python批量将word文档转换成 ...
- Spring Cloud 2020.0.0正式发布，再见了Netflix
目录 ✍前言 版本约定 ✍正文 Spring Cloud版本管理 与Spring Boot版本对应关系 当前支持的版本 阻断式升级(不向下兼容) 1.再见了,Netflix Netflix组件替代方案 ...
- Core3.0读取appsetting.json中的配置参数
前言 方法很多,下面的例子也是从百度上搜索到的,原文链接已经找不到了. 方法1 1.添加NovelSetting节点,写入相关的配置信息 2.创建类,字段与上面的配置一致 3.StartUp.cs中获 ...