![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网页布局
weixin_39048009
这个作者很懒,什么都没留下…
展开
-
实现每次刷新或是重新登录页面背景图的随机更换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面每刷新一次,加载不同的背景图片</title> <style> #changebg{width: 964px;height: 460px;margin: 0 auto;} </style> </head> <body> ..原创 2020-12-16 10:20:52 · 893 阅读 · 0 评论 -
html+css+bootstrap网页布局学习Day6
响应式布局:可以为不同终端的用户提供更加舒适的界面和更加友好的用户体验,而且随着目前大屏幕移动设备的普及,越来越多网站采用这个技术响应式设计一定是最佳选择吗?如果预算充足且形式需要,做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多,比如获取当前用户的GPS定位,只是用响应式设计会很难实现。但如果只是根据视口额大小为用户提供匹配的视觉效果还是优先选择响应式设计。优点:面对不用分辨率设备灵活性强。 能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大原创 2020-12-12 13:28:15 · 155 阅读 · 0 评论 -
html+css+bootstrap网页布局学习Day5
伸缩盒模型:flexbox要开启弹性盒模型,只需要设置display的属性值flex,因为他是 css3中dislplay新添加的值的类型。目的:在浏览器窗口变化时候i,盒子相应改变大小。设置了弹性盒模型后,float,clear盒vertical-align在flex中不起作用。父容器中常用属性 display:flex定义一个flex容器设置父元素是一个弹性盒,子元素会自动水平排列。 justify-content:flex-end;设置或检索弹性盒子原不俗在...原创 2020-12-07 08:44:04 · 181 阅读 · 1 评论 -
网页轮播图的实现
网页轮播图的实现实现原点切换图片,图片无缝衔接播放,左右按钮切换图片等功能,较为完善。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link href="css/egg.css" type="text/css" rel="stylesheet"> <script原创 2020-12-04 15:24:52 · 1111 阅读 · 0 评论 -
html+css+bootstrap网页布局学习Day4
浏览器的私有前缀根据不同的浏览器内核,css前缀会有不同。最基本的浏览器内核有如下四种,其她内核都是基于此四种进行在研发的。1.gecke内核 前缀为 -moz- 火狐浏览器2.webkit内核 前缀为 -webkit- 谷歌浏览器/safari3.trident内核 前缀为 -ms- ie内核4.presto内核 前缀为 -o- 目前只有opera/* 在实际使用中 通常将所有的前缀写一遍,标准的写在最后 */ google -webkit-animation: ; opera-o-原创 2020-12-03 17:29:45 · 125 阅读 · 0 评论 -
html+css+bootstrap网页布局学习Day3
今日完成效果:头部、logo、导航栏内容的添加。此处应该使用js来实现,暂用css的hover。红框内容的实现,它是一个div,父级为核心产品的div。把它 定位为绝对定位 position:absolute;display:none;当鼠标悬浮在父级上则显示三角形的是采用iconfun 中的元素完成,有类似边框效果是使用了阴影。text-shadow: 1px -1px #CCCCCC , -1px -1px #CCCCCC;每一个课程为一个div,<div id="bo原创 2020-12-02 17:11:50 · 143 阅读 · 0 评论 -
html+css+bootstrap网页布局学习Day2
仿写网站:学习猿地命名必须简单易懂,不要写“a”“b”之类的,尽量使用“content_left”一类的。先写div就像垒砖头一样。想要div并排必须使用float。这一图片布局采用的是定位。position:absolute;因此,父级的div也要使用定位position:relative,否则,该图片定位参考坐标为body(0,0)!下划线方法:border-bottom: #0000FF 3px solid;实现与下划线距离padding-bottom: 5px;去除li标签的原创 2020-12-01 17:20:47 · 99 阅读 · 0 评论 -
html+css+bootstrap网页布局学习Day1
float:不设置float之前<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #box{ width: 600px; height: 600px; background-color: deeppink; } #box>div:first-child{原创 2020-11-30 17:20:35 · 159 阅读 · 0 评论 -
html+css+bootstrap网页布局学习计划
学习目标:上次自己写布局,感觉自己的网页布局欠缺,仍需加强。目标:一周精通网页布局学习内容:1、 盒子模型深入学习2、 position的学习使用3、 bootstrap的使用4、 响应式学习时间:1、 周一至周五晚上 7 点—晚上9点2、 周一至周五早上 9 点—下午5点3、每天记录学习DayXX学习产出:一个仿写的 学习猿地网站首页。一个自己写的购物网站首页。...原创 2020-11-30 16:16:27 · 175 阅读 · 0 评论