6257rv7 发表于 2024-6-29 13:51:09

HTML+CSS实现基本网页布局（一）


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我的打算的创作<span style="color: black;">过程</span>是：静态页面 -&gt; 添加特效 -&gt; 动态页面 -&gt; 添加后台更新 -&gt; 进一步完善。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">那样</span>今天的<span style="color: black;">第1</span>篇<span style="color: black;">文案</span>便从HTML+CSS布局实现一个基本的静态页面<span style="color: black;">起始</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>总结一下我所<span style="color: black;">把握</span>HTML+CSS知识，中间肯定会有错误以及整理不到位的<span style="color: black;">地区</span>，欢迎各路大佬指正，先<span style="color: black;">这里</span>拜谢！</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">1、</span>html简介</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">超文本标记语言（HyperText Markup Language，简<span style="color: black;">叫作</span>：HTML）是一种用于创建网页的标准标记语言。HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)，<span style="color: black;">运用</span>标记标签来描述网页。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">2、</span>HTML标签</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 标记标签<span style="color: black;">一般</span>被<span style="color: black;">叫作</span>为 HTML 标签 (HTML tag)。HTML 标签<span style="color: black;">是由于</span>尖括号<span style="color: black;">包裹</span>的<span style="color: black;">重要</span>词，<span style="color: black;">例如</span> &lt;html&gt;，它<span style="color: black;">一般</span>是成对<span style="color: black;">显现</span>的，<span style="color: black;">例如</span> &lt;b&gt; 和 &lt;/b&gt;，标签对中的<span style="color: black;">第1</span>个标签是<span style="color: black;">起始</span>标签，第二个标签是结束标签，<span style="color: black;">起始</span>和结束标签<span style="color: black;">亦</span>被<span style="color: black;">叫作</span>为开放标签和闭合标签。例如：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>这是一个段落。<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML标签的种类有：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-344129bb8193bb6889cab92a27af1647_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>此<span style="color: black;">照片</span>引自百度百科<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">三、CSS样式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">层叠样式表(Cascading Style Sheets，缩写为CSS），是一种样式表语言，用来描述HTML或XML文档的呈现。CSS 描述了在屏幕、纸质、音频等其它<span style="color: black;">媒介</span>上的元素应该<span style="color: black;">怎样</span>被渲染的问题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">4、</span>CSS样式简单介绍</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.CSS语法规则</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">selector</span> <span style="color: black;">{</span><span style="color: black;">declaration1</span><span style="color: black;">;</span> <span style="color: black;">declaration2</span><span style="color: black;">;</span> <span style="color: black;">...</span> <span style="color: black;">declarationN</span> <span style="color: black;">}</span></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.CSS背景语法</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">div{
      bac<span style="color: black;">公斤</span>round-color: #70C000; 设置背景颜色
      bac<span style="color: black;">公斤</span>round-image: url(../img/1jmphz166b.jpg); 设置背景图像
      bac<span style="color: black;">公斤</span>round-repeat: no-repeat; 设置背景重复:no-reapeat不重复;repeat-x横向重复;repeat-y:纵向重复
      bac<span style="color: black;">公斤</span>round-position: center; 背景定位:center:居中;top:顶部;bottom:底部;right:右部;left:左部
      bac<span style="color: black;">公斤</span>round-attachment: fixed; 背景<span style="color: black;">相关</span>
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.CSS文本设置</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">p{
      text-align: center; 文本对齐方式
      font-family: "微软雅黑"; 字体样式
      font-size: 12px; 字体<span style="color: black;">体积</span>
      font-weight: bold; 字体加粗
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.链接</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">a:link {color:#FF0000;} 未被<span style="color: black;">拜访</span>的链接
      a:visited {color:#00FF00;} 已被<span style="color: black;">拜访</span>的链接
      a:hover {color:#FF00FF;} 鼠标指针移动到链接上
      a:active {color:#0000FF;} 正在被点击的链接</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.CSS盒子模型</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">div{
      height: 500px; 高度
      width: 500px; 宽度
      padding: 5px 5px; 内边距
      margin: 5px 5px; 外边距
      border: 5px; 边框
      position: absolute; 定位
      display: none; <span style="color: black;">表示</span>
      overflow: hidden; 溢出<span style="color: black;">表示</span>方式
      float: left; 浮动
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以上是对我所<span style="color: black;">把握</span>的HTML+CSS知识进行一个简单的总结与回忆，从明天<span style="color: black;">起始</span>正式<span style="color: black;">起始</span>网站的搭建与制作。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">注：<span style="color: black;">剧烈</span>欢迎各位大佬前来指明错误，<span style="color: black;">一起</span>进步，谢谢！</p>




nqkk58 发表于 2024-10-3 05:20:59

我完全赞同你的观点，思考很有深度。

4lqedz 发表于 2024-10-5 04:01:32

论坛的成果是显著的，但我们不能因为成绩而沾沾自喜。

j8typz 发表于 2024-10-8 10:06:19

楼主的文章深得我心，表示由衷的感谢！

b1gc8v 发表于 2024-11-7 14:29:32

我完全同意你的看法，期待我们能深入探讨这个问题。
页: [1]
查看完整版本: HTML+CSS实现基本网页布局（一）