HTML(Basic) Chapter7(Pink) CSS常见布局技巧

最新推荐文章于 2022-01-09 17:39:57 发布
最新推荐文章于 2022-01-09 17:39:57 发布
阅读量409 收藏 1
点赞数
分类专栏： CSS之路 HTML之路 文章标签： 定位 css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LeungSr/article/details/118945080
版权

文章目录

几个布局技巧

  1. margin负值的运用
  2. 文字围绕浮动元素
  3. 行内块的巧妙运用
  4. css的三角强化

1.margin负值的运用

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            width: 150px;
            height: 200px;
            border: 1px solid red;
            list-style: none;
            float: left;
            margin-left: -1px;
        }

        ul li:hover {
            /* 1.如果盒子没有定位则鼠标经过添加相对定位即可 */
            /* 一定要占有位置，使用相对定位 */
            position: relative;

            /* 2.如果有定位使用z-index */
            /* z-index: 2; */
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

最终效果

10

2.文字围绕浮动元素巧妙运用

使用浮动元素不会压住文字的特性来制作

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 120px;
            background-color: pink;
            margin: 0 auto;
        }

        .pic {
            float: left;
            width: 120px;
            height: 100px;
            margin-right: 5px;
            padding: 5px;
        }

        .pic img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="pink.jpg" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人</p>
    </div>
</body>

</html>

最终结果

11

3.行内块元素的巧妙运用

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            text-decoration: none;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            color: #333;
            font-size: 14px;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

</html>

最终效果

1

4.三角强化

  1. 左边和下边的边框宽度设置为0
  2. 把上边框的宽度调大

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue;
            border-bottom: 0 solid blue;
            border-left: 0 solid green; */
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            line-height: 24px;
        }

        .miaosha {
            text-align: center;
            position: relative;
            width: 90px;
            height: 100%;
            background-color: red;
            float: left;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">
            ￥5650
        </span>
    </div>
</body>

</html>

最终结果

2

写在最后

注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程 这一课程的学习记录，主要供自己的学习分享

各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！ ＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知

FeverTwice
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android--SQLite数据库实现增删改查
小口口的博客
06-14 3万+
SQLite–轻量级数据库 一般常见于安卓客户端。用于存储一些重要数据，因其操作容易、使用简单的好处博得一大批迷妹。今天就来说一说sqlite一些简单的使用方法。 一步一步开始做吧，我先创建个项目，主要是使用sqlite的代码。 首先，我需要在项目初次运行时创建数据库并新建一张user表，用来存储username和password两个字段； ...
【02】 PC端网页布局之CSS3-pink老师-2022/03
qq_44722174的博客
03-15 4152
PC端网页布局之CSS3 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 1. CSS基础 css最大价值：让HTML专注做结构呈现，样式交给CSS，即结构和样式相分离。主要调整文本内容、图像、页面布局和外观美化等。（网页的美容师） CSS代码风格 样式格式书写：紧凑格式和展开格式（强烈推荐） 样式大小写风格：全部使用小写（更加直观） 样式空格风格：冒号后，保留一个空格；选择器（标签）和大括号间保留一个空格
pink-移动web开发之流式布局
WENSHIKADA的博客
08-08 326
改变行高只是改变上下间距的大小， 目标： 知道移动WEB的开发现状 写出标准的viewport 使用移动WEB的调试方法 说出移动端常见的布局方案 描述流式分布 独立完成京东移动端首页 1. 移动端基础 2. 视口 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 3. 二倍图 二倍精灵图做法 .
移动web开发 - 布局 P390-415、440...
wsyyyyyyy的博客
10-31 305
（一）移动端 移动端基础 国内的手机浏览器都是根据webkit修改的内核，可以对webkit内核进行兼容。 视口（viewport） （1）是浏览器显示页面内容的屏幕区域，分为布局视口、视觉视口和理想视口。 布局视口（layout viewport）：移动端浏览器默认设置了布局视口，分辨率为980px；会将980px的PC页面压缩成手机屏幕大小。 ·视觉视口（visual viewport）：用户看到的网站的区域；所以屏幕上只看到页面的一部分区域。 理想视口（ideal viewport.
Android SQLite增删改查基本用法，通讯录实现
热门推荐
qq_41932905的博客
10-23 2万+
在Android的项目开发中，都会用到数据库，SQLite作为本地数据库，是一定要会的。Android团队封装了很多对SQLite操作的API。我这里自己写了一个Demo来总结一下SQLit的基本使用方法。 先上截图 Android专门提供了一个SQLiteOpenHelper帮助类，可以非常简单地对数据库进行创建和升级。 首先创建数据库，我们这里创建一个类继承SQLiteOp...
pink前端基础
Pillow_Monkey的博客
01-09 1034
跟着pink老师学习前端基础知识，一个笔记
basic-css-layout-demo：简单的html + css代码演示了一些布局技巧
02-17
"basic-css-layout-demo"是一个项目，旨在通过简单的代码实例来展示如何利用HTML和CSS实现基本的网页布局技巧。这个压缩包文件`basic-css-layout-demo-master`可能包含了一系列的HTML文件、CSS样式表以及可能的示例...
basic-html-css
03-04
在这个"basic-html-css"项目中，开发者可能创建了一个简单的HTML文件，包含标题、段落、链接和图片，然后用一个CSS文件来设定它们的颜色、布局和其他视觉效果。通过这种方式，他们学习了如何分离内容和表现，使得...
Basic-HTML-and-CSS-Webpage:HTML、CSS
07-24
- **布局技术**：CSS提供流式布局、网格布局（CSS Grid）和Flexbox（弹性盒子布局）来组织页面元素。 - **响应式设计**：使用媒体查询（@media）实现不同设备屏幕尺寸下的样式调整，适应移动设备。 3. **实践应用...
CursoAlura-Basic-HTML-CSS
03-11
这个"CursoAlura-Basic-HTML-CSS"课程旨在教授初学者如何使用HTML来构建网页。HTML由一系列元素组成，这些元素通过标签来表示，如`<html>`, `<head>`, `<body>`等，它们定义了网页的结构和内容。 1. **HTML文档结构...
Basic-html-css-js-template
03-20
标题 "Basic-html-css-js-template" 暗示了一个基础的前端开发模板，它包含了HTML、CSS和JavaScript的基础结构。这个模板可能是为了初学者快速搭建网页项目而设计的，或者是作为一个基本框架供开发者在构建新应用时...
pink老师整理笔记:
xingqushiran1989的博客
12-28 5327
HTML基础 https://mp.weixin.qq.com/s/lNkLbVL8qWsay8c3krVL8A 3.JavaScript基础 ：https://mp.weixin.qq.com/s/jcyVEHWkyzv4d71c09I3wA
HTML(Basic) Chapter5(Pink)网页浮动以及几种常用的布局方式
LeungSr的博客
07-17 277
文章目录1.基础知识HTML源代码（导航栏.html）导航栏最终效果2.综合案例 圆角边框、阴影的使用最终效果写在最后 1.基础知识 一个网页通常由三种方式进行布局分别是：普通流（标准流）、浮动、定位 标准流分为块级元素、行内元素和行内块元素组成（以前学习的知识） HTML源代码（导航栏.html） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <.
前端入门：HTML/CSS增强（九/十） P250-272、297
wsyyyyyyy的博客
10-15 570
精灵图 网页中有很多小的背景图片，如果每加载一张就与服务器通信一次，就会造成较大的请求压力，降低网页的加载速度。 原理：将网页中的一些小背景图整合到一张大图中； 使用时利用 background-position 将大图中要用的小图移动到盒子上作为背景； 由于background-position规定沿x轴向左移动是负值，沿y轴向上移动是负值，所以属性值一般为负。 字体图标 iconfont 用字体图标来做结构样式比较简单的图标，可以方便更改大小、颜色等样式，使用起来更灵活； 它是以图标.
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
haobowen的博客
12-05 8656
1. CSS 简介 CSS 的主要使用场景就是美化网页，布局页面的 1.1 HTML 的局限性 说起 HTML ，他只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这是一个段落，<img> 表明这有一个图片，<a> 表示此处有链接。 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表（Cascading Style Sheets）的简称 有时我们也称之为 CSS 样
本地练习Ajax跨域报错与状态值
pink_pantise的博客
01-03 210
今天学习ajax，请求本地文件时谷歌浏览器会报错。 解决方法就是右键谷歌浏览器快捷方式-属性-目标栏后面加上--allow-file-access-from-files要注意前面加空格！ 然后关闭浏览器，双击快捷方式启动，不要通过写的.html文件启动！（踩坑） 而且因为之前一直报错，代码里面判断状态值的代码打了断点，巧合下发现xmlHttp.readyState值是从0到4的 而不是申请成功之后直接就是4，后来百度也发现了问题： 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用sen
CSS知识点整理（pink老师课程的学习笔记）
ZMH的博客
02-06 2450
CSS知识点整理 CSS简介 CSS语法规范 代码风格 CSS引入方式 CSS元素显现方式 选择器 简单选择器 复合选择器 字体 文本 背景属性 字体属性 文本属性 背景属性 盒子模型 浮动 定位
HTML+CSS学习笔记pink
qq_38129681的博客
09-10 334
HTML+CSS第一章 盒子模型1.1内边距（padding)1.2外边距（margin)1.2.1外边距典型应用1.3外边距合并1.4清除内外边距1.4PS基本操作疑问解答1.5圆角边框1.6盒子阴影1.7文章阴影第二章 浮动2.1标准流（普通流/文档流）2.2浮动2.2.1 为什么需要浮动2.2.2什么是浮动2.2.3浮动的特性2.2.4 浮动元素经常和标准流父级搭配使用2.3清除浮动2.3.1 为什么要清除浮动2.3.2清除浮动的方法1额外标签法2父级添加overflow3：after伪元素法4双伪元
Android Service与Activity之间传值
小心——博客
09-28 2225
Service： //在你需要传值的地方发送一个 /intent.putExtra("mesSum", data):这是需要传的参数 //intent.action = "com.wimi.wsapp.framework.MessageService":这是Service所在位置 val intent = Intent() intent.putExtra("mesSum", d
西门子S7-1200与STEP7Basic常见问题详解及教程
本资源是一份针对西门子SIMATICS7-1200及配套软件STEP7Basic V10.5的入门教材和常见问题解答指南，适用于初学者理解和掌握这款PLC系统的基本操作和配置。S7-1200是西门子的一款紧凑型工业控制器，以其灵活性和高效性...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值