前端入门:HTML(列表和边框案例)

1.列表知识:

list-style-position有两个值,分别是inside,outside,分别表示在标签里面和在标签外面。

2.案例:

源代码:

html:

<body>

<div class="bigBox">

<div>在线解答问题</div>

</div>

<ul>

<li>新手前端适合买什么笔记本?</li>

<li>前端面试如何谈高薪?</li>

<li>大厂前端招聘中的内幕</li>

<li>28岁转前端来得及吗?</li>

<li>女生前端好找工作吗?</li>

</ul>

</body>

css:

* {

padding:0;

margin:0;

}

.bigBox {

width: 500px;

height: 310px;

background-color:pink ;

margin-top: 30px;

margin-left: 30px;

}

.bigBox>div {

height: 60px;

font-size: 20px;

color: #ff6347;

border-top: 2px solid #4e6ef2;

border-bottom: 1px solid #4e6ef2;

line-height: 60px;

font-weight: bold;

text-indent: 1em;

}

ul {

list-style: inside;

font-size: 18px;

line-height: 35px;

margin-top: 30px;

}

ul>li:hover {

color:blue;

text-decoration: underline;

}

相关推荐
并不会41 分钟前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、44 分钟前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具6 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端