Web前端开发-边框设置

最新推荐文章于 2024-04-10 23:15:12 发布
最新推荐文章于 2024-04-10 23:15:12 发布
阅读量1.4w 收藏 13
点赞数
分类专栏： HTML/CSS 文章标签： HTML CSS Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/viewerlin/article/details/80087770
版权

Web前端开发，自学笔记整理

边框设置

1.边框设置技巧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                margin: 30px;
                width: 400px;
                height: 300px;
                /*border: 1px solid gray;*/
            }
            li {
                width: 79px;
                height: 150px;
                border: 1px solid gray;
                float: left;
                list-style: none;

                /*边框设置技巧*/
                margin: -1px 0 0 -1px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

2.网店效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 1000px;
                height: 474px;
                margin: 50px auto;
            }
            .box dl {
                width: 198px;
                height: 237px;
                border: 1px solid lightgray;
                float: left;
                margin: -1px 0 0 -1px;
            }
            .box dl dt {
                height: 165px;
                border-bottom: 1px solid lightgray;
                text-align: center;
            }
            .box dl dt i {
                display: inline-block;
                vertical-align: middle;
                height: 100%;
                width: 0;
            }
            .box dl dt a {
                display: inline-block;
                vertical-align: middle;
            }
            .box dl dd p {
                height: 34px;
                line-height: 34px;
                padding-left: 16px;
            }
            .box dl dd p a {
                text-decoration: none;
                font-size: 14px;
                color: gray;
            }
            .box dl dd span {
                padding-left: 16px;
                line-height: 36px;
                color: red;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <!--一个商品-->
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    </a>
                    <i></i>
                </dt>
                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>

            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop2.png" />
                    </a>
                    <i></i>
                </dt>
                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>

            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop3.png" />
                    </a>
                    <i></i>
                </dt>

                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop4.png" />
                    </a>
                    <i></i>
                </dt>

                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    </a>
                    <i></i>
                </dt>

                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    </a>
                    <i></i>
                </dt>

                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    </a>
                    <i></i>
                </dt>
                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    </a>
                    <i></i>
                </dt>
                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    </a>
                    <i></i>
                </dt>
                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    </a>
                    <i></i>
                </dt>
                <dd>
                    <p> <a href="#">优步智能跑步机</a></p>
                    <span>¥2099.00</span>
                </dd>
            </dl>
        </div>
    </body>
</html>

这里写图片描述

viewerlin
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1.5Web前端基础笔记
m0_64838786的博客
03-15 478
css基础布局，可以进行简单的设计啦
Web前端开发之CSS学习笔记4—边框、边距、元素尺寸
qq_45709187的博客
05-03 7479
边界 border边框 语法：border:border-width|border-style|border-color; border-width：规定边框的宽度 border-style：规定边框的样式 border-color：规定边框的颜色 例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边界</title> &
CSS盒模型
yang_040706的博客
09-21 176
CSS盒模型
CSS 基础：border 的 3 个基础属性和简写方法
最新发布
u013179804的博客
04-10 3437
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集264篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中border（边框）是 CSS 中用来装饰元素周围区域的样式属性，主要作用是美化页面元素并提供视觉分隔效果。那我们一起来看一看它的基础属性，简写方法吧。
web前端技术笔记（四）块元素、浮动、定位、background属性
行者
03-19 862
块元素、内联元素、内联块元素 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： 支持全部的样式 如果没有设置宽度，默认的宽度为父级宽度100% 盒子占据一行、即使设置了宽度 内联元素 内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它
初学前端-CSS
weixin_61392399的博客
10-14 1107
前端三剑客中的CSS初学总结快来看看
Web前端开发工程师笔试题-CSS+Javascript.doc
12-14
Web前端开发工程师笔试题-CSS+Javascript 本资源提供了Web前端开发工程师笔试题，涵盖了CSS和Javascript相关知识点，总共22道题，涵盖了CSS样式表、HTML标签、Javascript语法、Document对象、CSS选择符、CSS样式...
Web前端开发-职业技能考试-初级-Web前端开发初级实操考试.pdf
11-29
【Web前端开发基础概念】 Web前端开发是互联网技术的重要组成部分，主要负责构建用户在浏览器端看到的网页和交互体验。初级Web前端开发人员需要掌握HTML、CSS和JavaScript等核心技术，用于创建网页结构、样式和动态...
web前端开发面试题汇总.doc
06-25
web 前端开发面试题汇总 以下是对给定文件的标题、描述、标签和部分内容的分析和知识点总结： 一、浏览器测试和内核 * 常用浏览器测试有 IE、Chrome、FireFox、Safari、Opera 等 * 浏览器内核有 Trident、Gecko、...
网页制作A卷及答案-HTML5+CSS3 Web前端开发-唐四薪-清华大学出版社.pdf
03-01
【网页制作A卷及答案-HTML5+CSS3 Web前端开发】这份资料主要涉及HTML5和CSS3在Web前端开发中的应用，是衡阳师范学院编辑出版学专业的一份期末考试试题。HTML5是用于构建网页结构的标记语言，而CSS3则是用于描述HTML...
Web前端开发试卷及答案.doc.doc
11-24
Web 前端开发试卷及答案 本资源为一份 Web 前端开发试卷，涵盖了 HTML、CSS、XHTML 等多方面的知识点。下面是对试卷中各个问题的解释和答案。 一、填空题 1. 目前常用的 WEB 标准静态页面语言是 HTML。 解释：...
web前端（文本样式、元素显示模式、边框、轮廓线、定位）
m0_74355247的博客
07-25 309
【代码】web前端（文本样式、元素显示模式、边框、轮廓线、定位）
【前端学习记录5】边框样式、列表样式、表格样式、图片样式和背景样式
aftertasttea的博客
12-08 1686
一、边框样式 1、整体样式： (1)属性：border-width定义宽度 border-style定义外观：none无样式、dashed虚线、solid实线 border-color定义颜色：取值“关键字”或“十六进制RGB值” (2)简写形式： div{border:1p...
Web前端——边框圆角（圆形，三角形）
P3323197861的博客
01-07 755
高和宽一比一，圆角1/2倍宽。宽和高二比1，圆角1/2倍宽。宽和高一比一，圆角一倍。
web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置
胜天半子祁同伟
01-28 9833
web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置
web前端-css边框（border）
苏凉.py的博客
05-27 6145
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录css边框属性css边框样式边框宽度圆角边框css所有边框属性 css边框属性 css的border属性允许您指定元素边框的样式、宽度和颜色。 css边框样式 border-style 属性指定要显示的边框类型。可以同时设置一到四个值（顺序为上边框、右边框、下边框和左..
7.29 Web前端-如何用伪类写分隔线
执笔绘江山的博客
07-29 1274
注意要选对位置，确定好需要分隔线的li，再给其一个伪类用after后者before都可以，这里我们两者都用上了，宽高可以控制你想要横线还是竖线，还需要对其进行一个绝对定位，与此同时还要给这个li标签一个相对定位，因为这个伪类元素是根据li的位置设定的，top值和left值是给这个线调制位置的，在网页检查中我们可以自由设定偏移量，然后最后把设定好的位置再写入css中，然后最后再给这个伪元素一个背景颜色，就可以写出一个分隔线了，大家可以根据我写的东西练习一下，这个是非常方便的，我们后面可以经常用到。...
对前端页面的边框设置
等风来盼风去
08-14 6572
二·如何对边框设置： １.&lt;div style="text-align:center; vertical-align:middel;"&gt;&lt;input type="text"&gt;&lt;/div&gt; 这样你试试,应该就是左右 上下都居中了 ２.如果是让内容显示的居中： &lt;html&gt; &lt;head&gt; &lt;style&gt;
WEB前端 | HTML基础——(2)CSS标签、边框、内外边距及选择器
Erosvan的博客
09-03 3287
一、组合标签 组合标签 有序列表1 有序列表2 有序列表3 有序列表4 无序列表 无序列表 标题 详情详情详情1 标题2 详情详情详情2 二、边框 三
Web前端开发技术-操作元素.pptx
07-07
Web前端开发技术中，操作元素是一个重要的部分。通过操作元素，我们可以控制网页中的各种元素，实现交互效果和动态展示。在操作元素的过程中，我们可以通过JavaScript来获取元素，并对元素的内容和属性进行操作。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值