临沧永德网站建设电子商务公司,网络营销师培训学校,wordpress 顶部工具,网站如何接入支付宝对CSS学习已经接近尾声#xff0c;下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。 题 1#xff1a;基于栅格布局的现代博客首页设计
题目要求#xff1a; 创建一个博客首页布局#xff0c;包含一个顶部导航栏、一个主要的内容区域#xff08;左侧为博客文…对CSS学习已经接近尾声下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。 题 1基于栅格布局的现代博客首页设计
题目要求 创建一个博客首页布局包含一个顶部导航栏、一个主要的内容区域左侧为博客文章列表右侧为一个侧边栏显示推荐内容以及一个底部的页脚。要求使用 栅格布局 来分割页面顶部导航栏固定在顶部内容区域左右分栏。
代码示例
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title博客首页/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6;}.container {display: grid;grid-template-rows: 80px 1fr 100px;grid-template-columns: 1fr 3fr 1fr;grid-template-areas: header header headersidebar main mainfooter footer footer;min-height: 100vh;}header {grid-area: header;background-color: #333;color: #fff;display: flex;justify-content: center;align-items: center;font-size: 24px;}.sidebar {grid-area: sidebar;background-color: #f4f4f4;padding: 20px;}.main-content {grid-area: main;padding: 20px;background-color: #fff;}footer {grid-area: footer;background-color: #333;color: #fff;text-align: center;display: flex;justify-content: center;align-items: center;}/style
/head
bodydiv classcontainerheader导航栏/headeraside classsidebar侧边栏推荐内容/asidesection classmain-contenth2博客文章标题/h2p这是博客文章的内容。你可以在这里测试文本和图片布局。/p/sectionfooter页脚信息/footer/div
/body
/html 示例注解
栅格布局的使用使用 grid-template-rows 和 grid-template-columns 将页面分为三行三列。第一行是顶部导航栏第二行分为左右两栏第三行是页脚。通过 grid-template-areas 确定每个区域的布局位置。
顶部导航栏header 元素被设置在第一行占据整个页面宽度居中显示导航文字。
内容区域main-content 和 sidebar 分别设置在栅格的中间部分主内容区域宽度是侧边栏的三倍符合现代博客的布局风格。
页脚footer 固定在页面底部跨越整个页面宽度并居中显示内容。
响应式设计通过 grid 的灵活性你可以轻松扩展布局适应不同屏幕大小。 题 2基于 Flexbox 和浮动的响应式电商产品页面
题目要求 创建一个电商网站的产品详情页面包括顶部的产品图片展示区、描述区、以及一个放置推荐产品的底部区域。要求通过 弹性盒布局 完成产品图片和描述区的布局底部的推荐产品使用 浮动布局。
代码示例
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleApple/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;background-color: aliceblue;}.product-section {display: flex;justify-content: space-between;padding: 20px;background-color: #f9f9f9;}.product-image {max-width: 2%;flex: 1;margin-right: 20px;}.product-image img {max-width: 100%;height: auto;display: block;}.product-details {flex: 2;}.product-details h2 {margin-bottom: 20px;}.recommendation-section {margin: 20px;overflow: hidden;}.recommendation-item {float: center;width: 100%;margin: 1.66%;background-color: #eee;padding: 10px;text-align: center;}.recommendation-item img {max-width: 100%;height: auto;}media (max-width: 768px) {.product-section {flex-direction: column;}.recommendation-item {width: 100%;margin-bottom: 20px;}}/style
/head
bodydiv classproduct-sectiondiv classproduct-imageimg src01.jpg alt产品图片/divdiv classproduct-detailsh2Apple/h2p这里是Apple是的就是Apple/p/div/divdiv classrecommendation-sectiondiv classrecommendation-itemimg src02.jpg alt推荐产品1piPhone 16 Pro/p/divdiv classrecommendation-itemimg src03.jpg alt推荐产品2piPhone 16 /p/divdiv classrecommendation-itemimg src04.jpg alt推荐产品3pApple Watch Ultra 2/p/div/div
/body
/html 示例注解
弹性盒布局的使用product-section 区域使用了 flexbox 布局product-image 和 product-details 分别占据 1 和 2 的比例保证图片和描述部分在大屏幕上呈现合理的比例。
图片自适应img 标签通过 max-width: 100% 确保图片不会超出其父容器且可以根据容器大小自适应缩放。
浮动布局的使用底部的推荐产品区域采用浮动布局每个推荐产品使用 float: left 并设置固定宽度使它们并排排列。同时使用 overflow: hidden 清除浮动。
响应式设计使用媒体查询media调整布局使页面在移动设备上显示更加友好。当屏幕宽度小于 768px 时产品图片和描述区垂直排列推荐产品区域的每个项目宽度为 100%。
