学习要点：
1.搜索区
2.插入大图
3.搜索框
主讲教师：李炎恢
本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面，第一个项目采用 PC 端固定布局来实现。
一．搜索区
本节课，我们接着 header 头部往下，来设计一块搜索区。这个区域，可以是广告大图，也可以是用户注册，也可以是一个搜索条，都是一个大幅背景，内嵌一个表单。具体造型如下：
从表面上来分析，就是插入一张背景大图，然后居中一个搜索条。但是，我们要求最小在 1280 分辨率、最大在 1920 分辨率能保持最佳的观看效果。而对于超过 1920 分辨率还要保持大图的位置合理。
二．插入大图
首先，为了满足最小的 1280 分辨率，大图本身的宽度必须大于 1280。而主流分辨率一般小于 1920，所以图片宽度设置为 1920 即可满足几乎所有用户。注：超过 1920 分辨率，即 2k+以上的分辨率一般不适合浏览网页了，会眼瞎。
我们从网上搜索一张风景图，原图的分辨率为：1920 x 1200。我们截取了中间一段变成：1920 x 600。那么被插入的背景区块应该怎么设置长度呢？
//创建一个搜索区域
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="search"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
//可以直接设置宽度为 1920 吗？
<span style="color: #800000;">#search </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 1920px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 600px</span>;
}
如果使用 1920 的宽度，势必在底部产生滚动条，非常的难看。那不采用 1920 的宽度，整张大图无法全面显示。那么我们的设计理念是，1280 分辨率显示大图中部区域的图片内容，而浏览器不断增大，就显示的内容越多。超过 1920 分辨率，让图片居中，两边空白即可。
//使用 100%，并插入背景图片
<span style="color: #800000;">#search </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> url(../img/search.jpg)</span>;
}
当我们故意缩小分辨率时，小于 1280 时，底部会出现滚动条。当我们拉动滚动条时，发现右侧出现的大量空白。这时由于之前采用了 100%自适应导致的，那我们强行设置这里虽然是 100%。但如果小于 1280 分辨率，就必须固定在 1280 即可。
//不能小于 1280 分辨率
<span style="color: #800000;">#header </span>{<span style="color: #ff0000;">
min-width</span>:<span style="color: #0000ff;"> 1263px</span>;
}<span style="color: #800000;">
#search </span>{<span style="color: #ff0000;">
min-width</span>:<span style="color: #0000ff;"> 1263px</span>;
}
对于大于 1920 的分辨率，我们将背景图片居中显示即可，两边留白。当然，还有一种方式，是专门设计这张大图的过渡渐变，两边快要接近纯色是，添加背景过渡。
//大于 1920 分辨率时
<span style="color: #800000;">#search </span>{<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> url(../img/search.jpg) no-repeat center</span>;
}
三．搜索框
我们希望在大图中间安插一个搜索框，先安插一个半透明的区块。
//创建一个区块
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="search"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="search"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入旅游景点或城市"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="button"</span><span style="color: #0000ff;">></span>搜索<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>
//将区块半透明且居中
<span style="color: #800000;">#search .center </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 600px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 60px</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> -30px 0 0 -300px</span>;<span style="color: #ff0000;">
border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
opacity</span>:<span style="color: #0000ff;"> 0.6</span>;
}
//父元素设置相对点
<span style="color: #800000;">#search </span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> relative</span>;
}
//搜索框和按钮样式
<span style="color: #800000;">#search .search </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 446px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 54px</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> -27px 0 0 -296px</span>;<span style="color: #ff0000;">
border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid #666</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #666</span>;<span style="color: #ff0000;">
outline</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 0 10px</span>;
}<span style="color: #800000;">
#search .button </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 54px</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> -27px 0 0 175px</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 22px</span>;<span style="color: #ff0000;">
border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #666</span>;<span style="color: #ff0000;">
font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
outline</span>:<span style="color: #0000ff;"> none</span>;
}
HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AMHTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。
HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AMHTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。
HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AMHTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AMHTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。
HTML：建立网页的结构Apr 14, 2025 am 12:14 AMHTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
Dreamweaver Mac版
视觉化网页开发工具
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
