专业的编程技术博客社区

网站首页 > 博客文章 正文

(1)响应式内页布局分析HTML模块化和CSS模块化详解

baijin 2024-11-26 11:15:31 博客文章 3 ℃ 0 评论

视频讲解课程

1.设计图分析和HTML模块化结构：https://www.ixigua.com/i6903745684596326915/

2.HTML模块化和CSS模块化示例：https://www.ixigua.com/i6904203127541465611/


HTML+CSS模块化基础代码

核心知识点

  1. 分析设计图结构和模块划分
    1. 横向分：头部，导航，banner，中间主体，底部
    2. 按页面分：列表页，详情页，单页
    3. 模块划分：列表，轮播，自定义模块
  2. 了解页面布局和模块化布局的区别
    1. 页面布局主要是分栏唯一功能，不能定义样式，一般用 col-为前缀命名
  3. 了解html模块化命名规范
    1. 列表类模块使用 ul-为前缀命名
      1. 列表li里面的命名规范
        1. 都以短的英文缩写为主
        2. 图片 .pic
        3. 文本 .txt
        4. 标题 .tit
        5. 日期 .date
        6. 简介 .desc
        7. 信息 .info
        8. 按钮 .btn
        9. 更多 .more
    2. 其他自定义模块都用 m- 为前缀命名
    3. 单独元素都已 g- 为前缀命名
      1. 大标题 g-tit1
      2. 按钮 g-btn
    4. 通用的模块统一命名
      1. 头部 header
      2. 底部 footer
      3. 主导航 nav
      4. 侧导航 snv
      5. 分页 pages
      6. 当前位置 cur
  4. 了解CSS模块化写法规范和编码顺序
    1. 先写初始化样式
    2. 然后是头部底部公用样式
    3. 然后写每个模块的样式
    4. 每个模块的样式都以模块命开头，每个模块独立
    5. .wp是限制页面宽度的
    6. .col- 是页面布局分栏的
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>5811响应式系列教程</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link rel="stylesheet" href="css/cui.css" />
        <link rel="stylesheet" href="css/cui-rel.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style-rel.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
		<style>
			/* 公用部分 */
			body { font-family: "微软雅黑"; font-size: 14px;}
			a{color:#333;}
			a:hover { color:#f00;}
			/* 布局 */
			.wp{ max-width: 1200px; margin: 0 auto;}
			.well { padding: 20px; background: #fff;}
			.col-l{width: 200px; float: left;}
			.col-r{width: 980px; float: right;}
			
			/* 模块 */
			
			/* 头部 */
			
			.header-top{ height: 40px; line-height: 40px; background: #000;}
			.header-top .txt {}
			.header-top .weat {}
			
			.header-con .logo { width:300px; float: left;}
			.header-con .so { width:300px; float: right;}
			
			.nav { height: 60px; line-height: 60px;}
			.nav li { float: left;}
			.nav li a { display: block; padding: 0 20px;}
			
			/* 底部 */
			
			.footer{}
			.footer .copy{}
			.footer .eq{}
			
			/* 侧边 */
			
			.g-tit1 {}
			.g-tit1 h2{}
			
			.snv {}
			.snv li{}
			.snv li a{}
			.snv li.on a{}
			
			/* 右边 */
			
			.g-tit2 {}
			.g-tit2 h2 {}
			
			.m-newstop {}
			.m-newstop .pic{}
			.m-newstop .txt{}
			.m-newstop .txt h3{}
			.m-newstop .txt .date{}
			.m-newstop .txt .desc{}
			.m-newstop .txt .btns{}
			
			.ul-news {}
			.ul-news li{}
			.ul-news li a{}
			.ul-news li .date{}
			
			.pages {}
			.pages li{}
			.pages li a{}
			.pages li.on a{}
			
		</style>
    </head>
<body>
 <div class="header">
	 <div class="header-top">
		 <div class="wp">
			 <div class="txt"></div>
			 <div class="weat"></div>
		 </div>
	 </div>
	 <div class="header-con">
		 <div class="wp">
			 <div class="logo"><a href=""><img src="" alt=""></a></div>
			 <div class="so"></div>
		 </div>
	 </div>
	 <div class="nav">
		 <div class="wp">
			 <ul>
			 	<li><a href="">首页</a></li>
			 	<li><a href="">首页</a></li>
			 	<li><a href="">首页</a></li>
			 	<li><a href="">首页</a></li>
			 </ul>
		 </div>
	 </div>
 </div>
 <!-- 主体 -->
 <div class="main">
	 <div class="wp">
		 <div class="well">
			 <div class="cur"></div>
			 <!-- 左边 -->
			 <div class="col-l">
				 <div class="g-tit1">
					 <h2>中心动态</h2>
				 </div>
				 <div class="snv">
					 <ul>
					 	<li><a href=""></a></li>
					 	<li><a href=""></a></li>
					 </ul>
				 </div>
			 </div>
			 <!-- 右边 -->
			 <div class="col-r">
				 <div class="g-tit2"><h2>工作动态</h2></div>
				 <!-- 头条推荐 -->
				 <div class="m-newstop">
					 <div class="pic"><a href=""><img src="" alt=""></a></div>
					 <div class="txt">
						 <h3><a href=""></a></h3>
						 <div class="date"></div>
						 <div class="desc"></div>
						 <div class="btns"><a href="">查看详情</a></div>
					 </div>
				 </div>
				 <!-- 新闻列表 -->
				 <ul class="ul-news">
					 <li><a href="">标题</a><span class="date">2020-11-22</span></li>
					 <li><a href="">标题</a><span class="date">2020-11-22</span></li>
					 <li><a href="">标题</a><span class="date">2020-11-22</span></li>
					 <li><a href="">标题</a><span class="date">2020-11-22</span></li>
				 </ul>
				 <!-- 页码 -->
				 <div class="pages">
				 	<ul>
				 		<li><a href="">1</a></li>
				 		<li><a href="">1</a></li>
				 		<li><a href="">1</a></li>
				 	</ul>
				 </div>
			 </div>
		 </div>
	 </div>
 </div>
 <div class="footer">
	 <div class="wp">
		 <div class="copy"></div>
		 <div class="eq"></div>
	 </div>
 </div>
</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表