前端学习——css定位

已于 2022-01-30 17:57:43 修改
阅读量502 收藏
点赞数
分类专栏： 前端 文章标签： 前端 css
于 2022-01-30 15:04:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RX1125/article/details/122752984
版权

前端学习——css定位

1.学习内容

主要学习css高级运用,掌握更多修饰技巧,增强网页可读性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京吃食府2.0</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!--快捷导航-->
<div class="shortcut">
    <div class="wrapper">
     <ul>
         <li><a href="#">请先登陆</a> </li>
         <li><a href="#">请先登陆</a> </li>
         <li><a href="#">请先登陆</a> </li>
         <li><a href="#">请先登陆</a> </li>
         <li><a href="#">请先登陆</a> </li>
         <li><a href="#">请先登陆</a> </li>
         <li><a href="#"><span></span>请先登陆</a> </li>
     </ul>
    </div>
</div>

<!--头部-->
<div class="header wrapper">
    <div class="logo"><a href="index.html"><img src="images/logo.png"></a> </div>
    <div class="nav">
        <ul>
            <li><a href="./index.html">首页</a></li>
            <li><a href="#">菜谱</a> </li>
            <li><a href="#">服务</a> </li>
            <li><a href="#">本店介绍</a></li>
        </ul>
    </div>
    <div class="search">
        <input type="text" placeholder="请输入关键字">
        <button></button>
    </div>
    <div class="car">
        <span>2</span>
    </div>
</div>

<!--头下banner图-->
<div class="banner">
<div class="wrapper">
    <ul>
        <li><a href="#"><img src="uploads/food_2.jpg"></a> </li>
    </ul>

    <div class="aside">
        <ul>
            <li><a href="#">北平风味<span>></span> </a></li>
            <li><a href="#">川渝风味<span>></span> </a></li>
            <li><a href="#">闽南风味<span>></span> </a></li>
            <li><a href="#">西北风味<span>></span> </a></li>
        </ul>
    </div>

    <a href="#" class="prev"><</a>
    <a href="#" class="next">></a>

    <ol>
        <li></li>
        <li></li>
        <li class="current"></li>
        <li></li>
        <li></li>
    </ol>
</div>
</div>

<!--版权区域-->
<div class="foot">
    <div class="wrapper">
        <div class="top">
            <ul>
                <li><span>价格亲民</span></li>
                <li><span>高端烹饪</span></li>
                <li><span>极致享受</span></li>
            </ul>
        </div>
        <div class="bottom">
            <p>
                <a href="#">关于我们</a> |
                <a href="#">关于我们</a> |
                <a href="#">关于我们</a> |
                <a href="#">关于我们</a> |
                <a href="#">关于我们</a>
            </p>
            <p>
                CopyRight @ 京吃食府
            </p>
        </div>
    </div>
</div>

</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*去除列表开头标点*/
ul,
ol{
    list-style: none;
}

/*去除超链接下划线*/
a{
    color: #4e4e4e;
    text-decoration: none;
}

/*双伪元素防止浮动错误和避免塌陷*/
.cleafix:before,
.cleafix:after{
    content: "";
    display: table;
}
.cleafix:after{
    clear: both;
}

body{
    font: 16px/1.5 宋体,sans-serif;
    color: #4e4e4e;
    background-color: #f3f5f7;
}

img{
    vertical-align: middle;
}

input{
    border: none;
    outline: none;
    color: #4e4e4e;
}

.wrapper{
    width: 1240px;
    margin: 0 auto;
}

.shortcut{
    height: 52px;
    background-color: #4e4e4e;
}
.shortcut .wrapper{
    height: 52px;
}
.shortcut .wrapper ul{
    float: right;
}
.shortcut .wrapper li{
    float: left;
    line-height: 52px;
}
.shortcut .wrapper a{
    padding: 0 16px;
    border-right: 1px solid #666;
    font-size: 14px;
    color: #dcdcdcdc;
}
.shortcut .wrapper a span{
    display: inline-block;
    margin-right: 8px;
    height: 20px;
    width: 20px;
    background-image: url("../images/logo-1.jpg");
    background-position: -30px -36px;
    vertical-align: middle;
}
.shortcut .wrapper a:hover{
    color: #000;
}
/*--------------------------------*/
.header{
    margin: 30px auto;
    height: 57px;
}
.logo{
    float: left;
}
.nav{
    float: left;
    margin-left: 70px;
    height: 57px;
}

.nav li{
    float: left;
    margin-right: 60px;
}

.nav li a{
    display: block;
    line-height: 57px;

    font-size: 18px;
    color: black;
}
.nav li a:hover{
    color: grey;
    border-bottom: 2px solid #808080;
}

.search{
    float: left;
    margin-left: 60px;
    width: 462px;
    height: 47px;
    border: 1px solid #808080;
}
.search input{
    float: left;
    padding-left: 20px;
    width: 410px;
    height: 45px;
    border: 0;
    font-size: 18px;
    font-family: 宋体, sans-serif;
}
.search input::placeholder{
    font-size: 16px;
    font-family: 宋体, sans-serif;
    color: #bfbfbf;
}
.search button{
    float: left;
    width: 50px;
    height: 45px;
    background-image: url("../images/search.jpg");
    background-position: 5px 0;
    border: 0;
}

.car{
    position: relative;
    margin: 15px 30px;
    float: right;
    width: 20px;
    height: 20px;
    background-image: url("../images/logo-1.jpg");
    background-position: -198px -260px;
    border-radius: 5px;
}
.car span{
    /*绝对定位,盒子具备行内块特点*/
    position: absolute;
    right: -12px;
    top:-5px;
    width: 15px;
    height: 12px;
    background-color: red;
    border-radius: 8px;
    font-size: 12px;
    color: white;
    text-align: center;
    line-height: 12px;
}

/*------------------------------------------*/

.foot{
    height: 342px;
    background-color: #4e4e4e;
}
.foot .wrapper{
    width: 1393px;
}
 .foot .top{
     padding-top: 60px;
     padding-left: 135px;
     height: 175px;
     border-bottom: 1px solid #cccccc;
 }
 .foot .top li{
     position: relative;
     float: left;
     margin-right: 300px;
     width: 190px;
     height: 40px;
     line-height: 40px;
 }
 .foot .top li:last-child{
     margin-right: 0;
 }
/*伪元素添加标签是行内模式*/
.foot .top li::before{
    position: absolute;
    left: 0;
    top: -5px;
    content: "";
    width: 45px;
    height: 40px;

    background-image: url("../images/logo-0.jpg");
    background-position: -210px -180px;
    vertical-align: middle;
}
.foot .top li span{
    margin-left: 60px;
    font-size: 25px;
    color: white;
}
.foot .top li:nth-child(2)::before{
    background-position: -25px -100px;
}
.foot .top li:nth-child(3)::before{
    background-position: -290px -180px;
}


.foot .bottom{
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    color: #999;
}
.foot .bottom a{
    font-size: 14px;
    color: #999;
}
.foot .bottom p{
    margin-bottom: 20px;
}

.banner{
    height: 500px;
    background-color: #edeef0;
}
.banner .wrapper{
    position: relative;
    height: 500px;
    background-color: darkolivegreen;
}
.banner .aside{
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 500px;
    background-color: rgba(0,0,0,0.5);
}
.banner .aside a{
    display: block;
    margin-top: 55px;
    padding-left: 20px;
    height: 60px;
    line-height: 60px;
    color: white;
    font-size: 20px;
    font-family: "Microsoft YaHei UI";
}
.banner .aside span{
    float: right;
}
.banner .aside a:hover {
    background-color: grey;
}

.prev,
.next{
    position: absolute;
    top: 280px;
    width: 45px;
    height: 45px;
    background-color: rgba(0,0,0,.2);
    border-radius: 50%;
    color: white;
    font-size: 25px;
    font-weight: 800;
    line-height: 45px;
}

.prev{
    left: 260px;
    padding-left: 12px;
}
.next{
    right: 10px;
    padding-left: 15px;
}

.banner ol{
    position: absolute;
    left: 680px;
    bottom: 30px;
    height: 10px;
}
.banner ol li{
    float: left;
    margin-right: 25px;
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
}
.banner ol .current{
    background-color: white;
}

2.成果展示

在这里插入图片描述
在这里插入图片描述

ren.janisa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端——CSS中常用的定位方式
Bingtangbgd的博客
07-03 1474
前端——CSS中常用的定位方式
前端基础-CSS定位
逍遥云恋
03-30 473
一、定位（重点） 定位的使用： ​ 1.4种定位方式：静态、相对、绝对、固定 ​ 2.4种边偏移属性：left、right、top、bottom 注意：偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 （向下走） 1.静态定位 所有标准流都是静态定位 语法：position:static <head> <meta charset=...
【前端】CSS定位
qq_45764950的博客
11-03 351
在使用定位布局时，可能会出现盒子重叠的情况。此时，就可以使用z-index来控制盒子的前后次序（z轴）选择器 { z-index: 1;}数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位只有定位的盒子才有z-index属性通过盒子模型，清楚知道大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列成为网页。一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。1、标准流。
【前端】深入理解CSS定位
山赶着山，山山漫漫结成关
08-18 3167
CSS定位是用来控制元素在页面上的位置和排列方式的技术。普通流、浮动流、定位流，其中定位流包括相对定位、绝对定位和固定定位。普通流：元素默认从上至下或者从左至右的排序顺序浮动流：添加了浮动的元素定位流：添加了定位的元素，包括相对定位、绝对定位、固定定位接下来，博主会从CSS定位、CSS边偏移、元素的显示与隐藏，这三部分进行讲解静态定位是元素的默认定位方式，无定位的意思#静态定位语法相对定位是元素在移动位置时，是相对于它原来的位置来说的#相对定位语法绝对定位。
【web前端开发】CSS定位
云泽野の编程日记
04-21 1605
定位有两个作用:1.可以解决盒子和盒子之间的层叠问题(定位之后元素层级最高,可以层叠在其它盒子上面)2.可以让盒子始终固定在屏幕中的某个位置属性名:position定位方式属性值静态定位static相对定位relative绝对定位absolute固定定位fixedps: 这四个取值中第一个就是不定位,加和不加都是一个效果.设置position只是设置定位的方式.除了定位方式还要设置偏移值偏移值设置分为两个方向(水平和垂直方向)方向属性名属性值含义水平left。
CSS五种定位方式详解
wshwsh_的博客
07-26 3998
position 属性规定应用于元素的定位方法的类型。
【前端学习 - CSS（9）定位】
weixin_60364883的博客
02-21 92
1. 定位 1-1 基本含义 相对定位，将元素的 position 设为 relative，元素相对于自身 content box 定位，仍占据原来位置空间； 绝对定位，将元素的 position 设为 absolute，元素相对于第一个 position 不为 static 的祖先元素的 padding box 定位，元素不占据原来位置空间； 固定定位，将元素的 position 设为 fixed，元素相对于浏览器窗口顶部定位，不占据原来位置空间 1-2 水平居中 通用方案： 行内元素：父元素
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
狂神说——CSS3最新教程快速入门通俗易懂
05-26
本教程“狂神说——CSS3最新教程快速入门通俗易懂”旨在帮助初学者快速掌握CSS3的核心概念和实际应用，通过实例解析，使学习过程更为直观易懂。 一、选择器增强 1. 类选择器：CSS3扩展了类选择器的用法，如`....
前端项目——小米官网首页
11-15
在本项目中，“前端项目——小米官网首页”旨在模拟实现小米官网的主页，采用的是基础的HTML、CSS技术，特别强调了对div和css的运用。这个项目对于初学者来说是一个很好的实践机会，因为它不涉及复杂的JavaScript...
前端基础——文档流与BFC
09-26
在前端开发中，理解和掌握文档流（Document Flow）与块级格式化上下文（Block Formatting Context，简称BFC）是构建网页布局的...在学习和实践中，深入理解这两个概念，并灵活运用，将使你的前端开发技能更上一层楼。
css中的定位详解，27岁学前端开发
2401_84091243的博客
04-03 874
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-fERSzdT7-1712090268267)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-uV6acKM2-1712090268268)]
前端css：定位
elktime的博客
08-02 164
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子定位也是用来布局的，它有两部分组成：定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。语法： 静态定位 按照标准流特性摆放位置，它没有边偏移。静态定位在布局时我们几乎不用的
前端——css相对定位，绝对定位，固定定位
起风了
02-03 8256
文章目录相对定位 position: relative;特性用途绝对定位 position: absolute;绝对定位参考点单独盒子绝对定位参考点：父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点。绝对定位水平居中固定定位参考点 相对定位 position: relative; &lt;style type="text/css"&gt; .box1{ width: 200p...
前端系列之CSS（定位）
十二指环的博客
01-19 269
一.position属性HTML中的三种常用的布局方式 * 标准流 * 浮动 * 定位两大元素： * 块级元素：div h1-h6 ol uil li table p * 内联元素:a span img inputrelative相对定位 absolute绝对定位 fixed固定定位，脱离正常的文档流 inherit继承定位二.z-index三.案例-侧边栏导航跟随案例<!DOCTY
目前最火的前端布局方式：less+rem+媒体查询
bigpatten的博客
02-10 3461
1. rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体...
前端基础CSS第六天
shj125的博客
01-23 133
CSS第六天 一、定位介绍 1.为什么使用定位 （1）某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 （2）当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 2.定位与浮动 （1）浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 （2）定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 3.定位组成 定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位也是用来布局的，它由两部分组成： 定位=定位模式+边偏移 定位
JAVA-WEB资源配置
最新发布
caryeko的专栏
08-15 212
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
“前端基础面试题总结——HTML结构、CSS布局与新特性概要”
前端基础面试题涵盖了HTML和CSS等前端知识的基本概念和常见问题，这些问题不仅可以帮助面试者检验自己的掌握程度，也可以帮助面试官评估应聘者的能力和经验。在HTML方面，面试题涉及HTML结构的语义化、元素属性的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值