第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框
html5+css3pc端固定布局,搜索区,插入大图,搜索框
设置一个div作为搜索区域
1.宽度为百分之百
2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小宽度设置为1263后,当缩小低于1263时,就是1263的宽度不破坏布局
插入大图
将图片作为背景插入div区域,背景显示一次,背景居中显示
搜索框
在插入背景的div做搜索框,用定位方式居中
完成
html代码
<!--搜索区域-->
<div class="sou-suo">
<h2>搜索</h2>
<div class="sou-suo2"></div>
<div class="sou-suo3">
<input type="text" placeholder="请输入搜索内容">
<button>搜索</button>
</div>
</div>
css代码
/*搜索区域*/
.sou-suo{
width: 100%;
min-width:1263px;
height: 600px;
background: url("../img/search.jpg") no-repeat center;
position: relative;
}
.sou-suo h2{
display: none;
}
.sou-suo .sou-suo2{
width: 600px;
height: 60px;
background-color: #000000;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -30px;
border-radius: 8px;
opacity: 0.7;
}
.sou-suo .sou-suo3{
width: 600px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -30px;
border-radius: 8px;
}
.sou-suo .sou-suo3 input{
width: 500px;
height: 50px;
border: none;
border-radius: 8px;
margin: 5px 0 5px 5px;
padding: 0 5px 0 5px;
font-size: 22px;
line-height: 50px;
}
.sou-suo .sou-suo3 button{
width: 70px;
height: 50px;
border: none;
border-radius: 8px;
float: right;
margin: 5px 8px 5px 0;
font-size: 22px;
line-height: 50px;
cursor: pointer;
}
.sou-suo .sou-suo3 button:hover{
background-color: #C6C6C6;
}
第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框的更多相关文章
- 第八十九节,html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区
html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...
- 第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- 第八十七节,html5+css3pc端固定布局,大纲算法,section和div,结构分析
html5+css3pc端固定布局,大纲算法,section和div,结构分析 一.大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...
- 第九十一节,html5+css3pc端固定布局,完成首页
html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...
- 第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域
html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...
- 第三百八十八节,Django+Xadmin打造上线标准的在线教育平台—网站列表分页
第三百八十八节,Django+Xadmin打造上线标准的在线教育平台—网站列表分页 分页可以用一个第三方分页模块django-pure-pagination 下载地址:https://github.c ...
- 第 31 章 项目实战-PC 端固定布局[5]
学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.底部区 ...
- 第 31 章 项目实战-PC 端固定布局[4]
学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.热门 ...
- 第 31 章 项目实战-PC 端固定布局[3]
学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.搜索区 本节课 ...
随机推荐
- angularjs 路由回退,返回到上一个路由
在现阶段比较流行的angularjs框架中:路由是一个比较重要的应用:angularjs的单页面是其强大功能之一: 所有的页面其实就只是在一个页面就实现的:angularjs通过对路由的控制来进行页面 ...
- 二、spark入门之spark shell:文本中发现5个最常用的word
scala> val textFile = sc.textFile("/Users/admin/spark-1.5.1-bin-hadoop2.4/README.md") s ...
- python爬虫框架scrapy初识(一)
Scrapy介绍 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中.所谓网络爬虫,就是一个在网上到处或定向抓取数据的 ...
- mysql权限设置
想要设定权限,必须通过root用户登录: >> grant all privileges on *.* to root@"%" identified by " ...
- uinty3d使用ugui封装一个分页控件
我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...
- 敏捷开发(八)- Scrum Sprint计划会议1
本文主要是为了检测你对SCRUM Sprint 计划会议的了解和使用程度, 通过本文你可以检测一下 1.你们的SCRUM Sprint 计划会议的过程和步骤 2.会议的输出结果 S ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- java中的反编译
使用JD-GUI工具 支持mac os 和 windows 地址为:http://jd.benow.ca
- Sipdroid实现SIP(一): 注册
目录 注册: 预注册获取长号和用户注册 预注册返回长号 周期性用户注册 Receiver类概述 SipdroidEngine类概述 Sipdroid类中的用户注册: 注册代理和注册事务 注册代理类Re ...
- 洛谷-求同构数的个数-NOIP2013提高组复赛
题目描述 Description 所谓同构数是指这样的数,即它出现在它的平方数的右端.例如,5的平方是25 (即5×5=25),5是25右端的数,那么5就是同构数.又如,25的平方是625(即25×2 ...