时间：2023-05-23 17:33:01 | 来源：网站运营
时间：2023-05-23 17:33:01 来源：网站运营
小白7天入门PHP Web开发 - Day 3 CSS和JS的基础应用：《小白7天入门PHP Web开发》系列文章，面向单纯善良的完全不懂Web开发编程的入门速成课程，小白们如果感兴趣可以研读此系列文章，也可以连线提问。各路大神有何指教还请指点一二。希望各路大神手下留情，注意维护自己的身份和形象。拜谢各位。上一篇文章 我们学会了使用简单的HTML标签完成了留言评论页面的实现（开发），这节我们开始尝试使用CSS来修饰和美化我们昨天写的HTML页面。
在线咨询
/*以下是CSS的基本写法*/* { font-size: 14px;}html, body, ul, li, p { margin: 0px; padding: 0px;}#list, .form { width: 100px; height: 100px; background-color: gray;}从上面的CSS代码，我们不难看出（强行不难），基本结构就是/*注释内容，我就不多讲了，就是两头加中间内容*/选择器1, 选择器2 ｛ 属性名：属性值｝没错~！（你们知道我括号里要说什么）什么叫 选择器 呢？选择器 通常是我们需要改变外貌（样式）的 HTML 元素，就是用来选择要改变样式的HTML元素，比如上面的* /*是代表选择了页面上所有的HTML元素，可以称之为通配选择器*/html, body, ul, li, p /*是选择了叫这些名字的HTML标签元素，可以称之为标签选择器*/#list /*是代表了具有属性id="list"的HTML元素，可以称之为id选择器*/.form /*是代表了具有属性class="form"的HTML元素，可以称之为类选择器*/暂时我们只需要先记住这些选择器，基本上够我们比较长一段时间内使用了。 <!-- HTML代码 --> <div id="box"> 我是一个BOX </div> <!-- CSS代码 --> <style type="text/css"> #box { width: 100px; height: 100px; background-color: lightgray; margin: 100px auto; padding: 20px; border: 2px dotted gray; } </style>效果图上一个#box { margin: 10px 20px 10px 20px;}#box { margin: 10px 20px;}#box { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;}最后有没有发现，效果图左下角这个宽度和高度，我们设置的是100*100，变成了144*144呢？正是因为算上了边框的2px、内边距的20px，两边就是44px啦，边框和内边距跟元素本身的宽高组成了元素的最终宽高。<div id="box" style="margin: 0 auto;">第二种方式：直接放在HTML标签 <style></style>的内部<style type="text/css"> #box { margin: 0 auto; }</style>第三种方式：直接放在后缀名为 .css 的文件内，然后在HTML页面用 <link href="stylefile.css">引入即可<!-- stylefile.css -->#box { margin: 0 auto;}<!-- board.html --><head> <link rel="stylesheet" type="text/css" href="style.css"></head><div id="box"></div>三种方式可以交叉使用，第一种最直接，但是如果属性多，页面看起来就会很杂乱，所以有了第二种，把CSS集合起来，但是第二种CSS代码过多，或者有些公共的通用的CSS代码时，不同页面要重复写相同CSS，很烦，所以有了第三种文件形式的写法，不同页面引入同一个CSS文件就可以了，该内容要求仔细体会理解，融（si）会（ji）贯（ying）通（bei）~！<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>留言评论页面</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div id="container"> <!-- 主题标题 --> <div id="topic"> 主题：你怎么看这个页面？ </div> <!-- 已经留言评论的内容 --> <div id="list"> <!-- 留言评论列表 --> <ul> <li> <!-- 评论内容 --> <p class="comment"> <span class="img"> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">张五儿</span> <span class="content">我就是趴窗口看啊，不然能怎么看</span> <span class="time">22：29</span> </p> <!-- 回复内容 --> <!-- 回复列表 --> <ul class="reply"> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">李二狗</span> <span class="replytxt">回复</span> <span class="name">张五儿</span> <span class="content">666</span> <span class="time">22:29</span> </li> </ul> </li> <li> <!-- 评论内容 --> <p class="comment"> <span class="img"> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">张五儿</span> <span class="content">我就是趴窗口看啊，不然能怎么看</span> <span class="time">22：29</span> </p> <!-- 回复内容 --> <!-- 回复列表 --> <ul class="reply"> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">李二狗</span> <span class="replytxt">回复</span> <span class="name">张五儿</span> <span class="content">666</span> <span class="time">22:29</span> </li> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">孙六</span> <span class="replytxt">回复</span> <span class="name">李二狗</span> <span class="content">我也觉得很666</span> <span class="time">22:29</span> </li> </ul> </li> <li> <!-- 评论内容 --> <p class="comment"> <span class="img"> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">张五儿</span> <span class="content">我就是趴窗口看啊，不然能怎么看</span> <span class="time">22：29</span> </p> <!-- 回复内容 --> <!-- 回复列表 --> <ul class="reply"> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">李二狗</span> <span class="replytxt">回复</span> <span class="name">张五儿</span> <span class="content">666</span> <span class="time">22:29</span> </li> </ul> </li> <li> <!-- 评论内容 --> <p class="comment"> <span class="img"> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">张五儿</span> <span class="content">我就是趴窗口看啊，不然能怎么看</span> <span class="time">22：29</span> </p> <!-- 回复内容 --> <!-- 回复列表 --> <ul class="reply"> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">李二狗</span> <span class="replytxt">回复</span> <span class="name">张五儿</span> <span class="content">666</span> <span class="time">22:29</span> </li> </ul> </li> </ul> </div> <!-- 提交留言和评论 --> <div id="form"> <form action="" method="get"> <!-- 标题，此处标题在上面其实并没有用到，大家理解怎么使用HTML就可以了 --> <p> <input type="text" name="title" placeholder="请输入标题"> </p> <!-- 内容 --> <p> <textarea name="content" placeholder="请输入内容"></textarea> </p> <!-- 按钮 --> <p> <button type="submit">提交</button> </p> </form> </div> </div></body></html>首先，我们发现所有内容都要居中，那么我们在所有元素外面包一层<div id="container">，然后让这个div居中，里面的内容也就自然居中了。左右居中我们常用的办法之一就是下面的代码/*左右居中方法之一，设置宽度和margin为0 auto，后者意思是左右外边距自动上下为0*/#container { width: 600px; margin: 0 auto;}然后，我们要主题文字变大，同时整个container距离顶部一定距离（外边距），给展示的留言评论加个背景颜色和上面的距离（外边距）。/*所有元素去掉内外边距，元素独自设置，并设置字体为微软雅黑，统一字体大小*/* { margin: 0; padding: 0; font-family: "微软雅黑"; font-size: 14px;}/*去掉ul列表的默认样式，前面有小点点，去掉*/ul { list-style: none;}/*整体距离顶上边50px，并做左右居中处理*/#container { width: 600px; margin: 0 auto; margin-top: 50px;}/*主题字体大小设置为48px*/#topic { font-size: 48px;}/*留言评论列表添加上边距30px和背景颜色*/#list { margin-top: 30px; background-color: #f4f4f4;}第三步，我们要下面的表单（还记得表单吧）跟上面元素的距离（外边距）里面的文本框和文本域以及按钮有一定宽度和高度。/*表单上边距*/#form { margin-top: 30px;}/*输入框设置宽度（100%表示充满整个父元素）、高度、左内边距（使里面字显示好看些）最后的box-sizing用于设置为元素设定的宽度和高度决定了元素的边框盒，效果就是内边距不会撑开元素的大小，我们上面提到的100变144的请款。*/#form input { width: 100%; height: 30px; padding-left: 10px; box-sizing: border-box;}/*基本同上*/#form textarea { margin-top: 10px; width: 100%; height: 120px; padding: 10px; box-sizing: border-box;}/*基本同上*/#form button { margin-top: 10px; width: 100px; height: 28px;}经过这三步处理，我们来看看页面的效果#list { margin-top: 30px; background-color: #f4f4f4; padding: 30px 40px;}第五步，处理评论和回复的样式/*评论的外层样式，最小高度和行高，一样为了保证文本垂直居中*/.comment { min-height: 50px; line-height: 50px;}/*回复的外层样式，回复应当比评论要缩进一些，就像文章段落缩进一样用的padding-left*/.reply { line-height: 50px; padding-left: 50px;}/*display:inline-block;所有span标签让他们以行内块元素来渲染，方便处理高度和行高*/.list span { display: inline-block; height: 40px; line-height: 40px; padding: 4px;}/*这部分处理头像宽高自不用讲border: 1px solid gray;表示给图片设置1个像素宽度的实体灰色的边框vertical-align: middle;图片垂直居中border-radius: 50%;设置边框的圆角，50%让他变成一个圆*/.img img { width: 36px; height: 36px; border: 1px solid gray; vertical-align: middle; border-radius: 50%;}/*人名同意处理，字体加粗，16px大小*/.name { font-weight: bold; font-size: 16px;}/*发布时间*/.time { font-size: 12px; color: lightgray;}/*评论或回复内容块的内边距*/.content { padding: 4px 10px;}/*回复 两个字的字体颜色设置为灰色*/.replytxt { color: gray;}最后完整的样式CSS代码如下/*所有元素去掉内外边距，元素独自设置，并设置字体为微软雅黑，统一字体大小*/* { margin: 0; padding: 0; font-family: "微软雅黑"; font-size: 14px;}/*去掉ul列表的默认样式，前面有小点点，去掉*/ul { list-style: none;}/*整体距离顶上边50px，并做左右居中处理*/#container { width: 600px; margin: 0 auto; margin-top: 50px;}/*主题字体大小设置为48px*/#topic { font-size: 48px;}/*留言评论列表添加上边距30px和背景颜色*/#list { margin-top: 30px; background-color: #f4f4f4; padding: 30px 40px;}/*表单上边距*/#form { margin-top: 30px;}/*输入框设置宽度（100%表示充满整个父元素）、高度、左内边距（使里面字显示好看些）最后的box-sizing用于设置为元素设定的宽度和高度决定了元素的边框盒，效果就是内边距不会撑开元素的大小，我们上面提到的100变144的请款。*/#form input { width: 100%; height: 30px; padding-left: 10px; box-sizing: border-box;}/*基本同上*/#form textarea { margin-top: 10px; width: 100%; height: 120px; padding: 10px; box-sizing: border-box;}/*基本同上*/#form button { margin-top: 10px; width: 100px; height: 28px;}/*评论的外层样式，最小高度和行高，一样为了保证文本垂直居中*/.comment { min-height: 50px; line-height: 50px;}/*回复的外层样式，回复应当比评论要缩进一些，就像文章段落缩进一样用的padding-left*/.reply { line-height: 50px; padding-left: 50px;}/*display:inline-block;所有span标签让他们以行内块元素来渲染，方便处理高度和行高*/.list span { display: inline-block; height: 40px; line-height: 40px; padding: 4px;}/*这部分处理头像宽高自不用讲border: 1px solid gray;表示给图片设置1个像素宽度的实体灰色的边框vertical-align: middle;图片垂直居中border-radius: 50%;设置边框的圆角，50%让他变成一个圆*/.img img { width: 36px; height: 36px; border: 1px solid gray; vertical-align: middle; border-radius: 50%;}/*人名同意处理，字体加粗，16px大小*/.name { font-weight: bold; font-size: 16px;}/*发布时间*/.time { font-size: 12px; color: lightgray;}/*评论或回复内容块的内边距*/.content { padding: 4px 10px;}/*回复 两个字的字体颜色设置为灰色*/.replytxt { color: gray;}最后我们得到页面的结果长这个样子，对比一下最初的看看，是不是还是有点神奇的<form action="" method="get"> <!-- 标题，此处标题在上面其实并没有用到，大家理解怎么使用HTML就可以了 --> <p> <input type="text" name="title" placeholder="请输入标题"> </p> <!-- 内容 --> <p> <textarea name="content" placeholder="请输入内容"></textarea> </p> <!-- 按钮 --> <p> <button type="submit">提交</button> </p></form>页面样子参考上图 2-3下半部分输入文字的地方。<form action="" method="get"></form>常用属性就上面这两个，action 指定表单提交到哪个页面或者哪个地址，这个地址通常是我们后面要讲的后端页面PHP页面；method 定义了表单以何种方式提交表单里面的数据，一般有get和post两种方法。get表单直接提交的话，数据会以 属性名=属性值 的方式拼接在url（地址栏里面那个）后，post的话就把数据写到请求体（可以理解为页面把所有要提交的数据还有浏览器信息等等放在一起的一个，嗯，体，一坨东西）提交到其他页面或远端。这里为了方便讲解，我们用get方式提交到了当前页面（action属性值为空就行），我们就能轻松看到我们的数据提交到了哪里。如果想了解，戳下面本站上的回答<input type="text" name="title" placeholder="请输入标题"><textarea name="content" placeholder="请输入内容"></textarea><!-- 注意按钮类型是submit的时候才会提交表单，并且按钮和表单元素应该在form标签内 --><button type="submit">提交</button>url地址变成了board.html?title=用眼睛看谢谢。&content=没错，达叔说了用眼睛看。3、提交表单时数据内容为空<form action="" method="get" onsubmit="return checkform()">她的属性值是js表达式或js函数，下面就是函数的基本结构，也是js在页面中使用的基本方式（代码下载body标签内或head标签内即可） <script type="text/javascript"> // 定义函数checkform，定义函数用 function 函数名(){ 语句 }的方式定义 function checkform () { // 获取title和content的值 // 这里声明了两个变量 title 和 content // 变量是用来在代码里存储数据的，数据存在哪里？在内存里，没错电脑的内存 var title = document.getElementsByName('title')[0].value; var content = document.getElementsByName('content')[0].value; // 判断title和content如果有一个为空，就返回false //（可以理解为错误，返回false后将不会继续提交表单） if (!title || !content) { // 条件判断语句if，这是js的语法之一，可以理解为如果括号里的条件成立，就执行 // if花括号里面的语句 return false; } } </script>如此一来，我们只要没有填title或者content就势必不会提交表单。关键词：基础,入门
