自己动手，写个小网页，前端0基础自学

前边讲了HTML和CSS，这次简单实现个页面，主要功能就是一个导航栏和一个简单登录界面。相当于复习下之前讲的HTML骨架和CSS样式。

开始之前先讲下，CSS引入的方式分为三种：一种是行内，一种是在HTML中的head中，还有一种方式是CSS文件的形式引入。

最后一种方式最为常用，行内的优先级最高，就是行内的样式会覆盖掉前两个样式，这里了解就行。分为做演示：

 <span style="font-size: 20px;font-family: 'Times New Roman', Times, serif;">字体样式</span>

<head>  	<style type="text/css">      	<!--这里边写样式文件-->      		span{            	font-size: 20px;            	font-family: 'Times New Roman', Times, serif;          }      </style>  </head>

//第三种方式，也是使用最多的方式就是使用link标签引入css文件<head>  	<!--其中的style是文件的名称，css是文件的格式-->  	<link rel="stylesheet" href="style.css">  </head>

下面开始，自己动手写网页，写之前先要有个网页的总体规划，这就是设计阶段--

简单设计

原谅我画图的丑陋，下面简单分析下网页的组成，网页中的logo是个图片，然后是后边跟着的导航栏，然后是一个登陆的form表单，还有一个底部，可以把logo和导航放到一个div里边，然后是登陆表单一个div，然后是网页的底部一个div，下面开始编写

 <div id="app">        <div class="header-container">            <!--logo图片-->            <div class="logo-pic">                            </div>            <!--导航栏-->            <nav>              	<!--快捷键ul>li*4>a-->                <ul>                    <li value="index"><a href="">首页</a></li>                    <li value="user"><a href="">个人中心</a></li>                    <li value="service"><a href="">客服中心</a></li>                    <li value="about"><a href="">关于我们</a></li>                </ul>            </nav>        </div>				<!--登陆表单-->        <div class="login-box">            <hr>            <form action="" class="login-form">                <span>登录：<input type="text" id="username" class="username" placeholder="请输入用户名..."></span><br>                <span>密码：<input type="password" id="password" class="password" placeholder="请输入密码..."></span><br>                <button type="submit" onclick="doLogin()" class="btn btn-primary login-btn">点击登录</button>            </form>            <hr>        </div>				<!--页面底部-->        <div class="footer">							        </div>    </div>

骨架基本搭好，后续就是CSS的美化工作了，CSS文件可以直接引入框架写好的，但是要遵守框架CSS样式的标签命名规则，下次给大家分享怎么使用框架中的CSS文件来美化自己的页面。

记录自己的自学之路，欢迎点赞评论关注，先分享到这里。