前端学习笔记-07post请求和get请求，样式以及CSS
2024-04-18 01:33:59
1.get请求和post请求的区别
2. style属性
通过设置style属性来改变样式
案例：使用style属性优化登录表单
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="http://www.baidu.com" method=""> <!--action 为表单提交的地址--> <table border="1px" cellspacing="0" cellpadding=""><colgroup span="2" width="150px"></colgroup><col width="200px"><tr height="20px" align="center"><td rowspan="4" style="color: #06bd00;">总体信息</td><td colspan="2"></td></tr><tr height="20px" align="center"><td align="right">用户名:</td><td ><input type="text" name="loginname" id="" value=""/></td></tr><tr height="20px" align="center"><td align="right">密码:</td><td><input type="password" name="pwd" id="" value="" /></td></tr><tr height="20px" align="center"><td colspan="2"><input type="submit" name="" id="" value="提交" style="width:80px; height:30px;background-color:lightblue" /> <!--type需要时submit才会提交--><input type="reset" name="" id="" value="重置" style="width:80px; height:30px;background-color:lightblue" /><!--type需要时reset才会重置--></td></tr></table></form></body>
</html>3.div 和 span 标签
案例1-使用div和span元素并设置相应的属性来调整页面样式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="" style="width:500px; dimgray;margin: auto;"><p style="text-align: center;"><span id="" style="background-color:slategray ; color:white; font-size: 20px;"><b>我的天才女友 </b> <!--b标签用于文字加粗--></span></p><p><span id="" style="color: lightslategray;">故事发生在位于意大利那不勒斯的一个贫穷而又破败的社区之中，莉拉（卢多维卡·纳斯蒂 Ludovica Nasti 饰）和爱莲娜（艾丽莎·德尔·杰尼奥 Elisa del Genio 饰）从小就生活在那里。莉拉出生在一个专制的家庭之中，父亲是一名鞋匠。</span>虽然莉拉在班级里是公认的天才少女，但是在父亲的坚持之下，莉拉最终放弃了学业，在鞋店里成为了帮工。 </p><p>和莉拉不同，爱莲娜在家人和老师的支持之下继续求学，虽然和莉拉走上了截然不同的人生道路，但爱莲娜的目光始终凝聚在莉拉的身上。</p><p>在十六岁那一年，莉拉嫁给了苦苦追求她的富家子弟斯代凡诺（乔万尼·阿穆拉 Giovanni Amura 饰），可是等待着她的却并非美好的婚姻生活。</p></div> </body>
</html>- 样式设置
案例2-制作网站导航页并用style属性设置样式（行内样式）
<!DOCTYPE html>
<html style="background-color: azure;"><head><meta charset="utf-8"><title></title></head><body style="margin: 0;"> <!--设置margin为0是图片与网页边框贴合--><div id="banner" style=""><img src="../img/xiaolizi.JPG" style="width: 100%;height: 1000px;" > </div><div id="navigation" style="height:80px;line-height: 80px; text-align: center;color:black;"><a href="https://movie.douban.com/celebrity/1041029/" style="color: black;margin: 15px;">小李子首页</a><a href="https://baike.baidu.com/item/%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A%C2%B7%E8%BF%AA%E5%8D%A1%E6%99%AE%E9%87%8C%E5%A5%A5/1243185?fromtitle=%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A&fromid=5753&fr=aladdin" style="color: black;margin:15px">小李子简介</a><a href="https://movie.douban.com/celebrity/1041029/movies?sortby=time&format=pic" style="color: black;margin: 15px;">小李子电影</a><a href="https://baijiahao.baidu.com/s?id=1596875990048142671&wfr=spider&for=pc" style="color: black;margin: 15px;">小李子前女友</a><a href="https://www.sohu.com/a/231561754_115547" style="color: black;margin: 15px;">小李子最新爆料</a><a href="https://tieba.baidu.com/f?fr=ala0&kw=%C0%B3%B0%BA%C4%C9%B6%E0&loc=rec" style="color: black;margin: 15px;">小李子互动</a> </div><div id="bottom" style="height: 40px;line-height: 40px;text-align: center;background-color: lightgray;">小李子是我永远的梦中情人。。。</div></body>
</html>案例3-改写案例2（将行内样式改写为内部样式）
<!DOCTYPE html>
<html ><head><meta charset="utf-8"><title></title><style >html{background-color: azure;}body{margin: 0;}#banner img{width: 100%;height: 1000px;}#navigation{height:80px;line-height: 80px; text-align: center;color:black;}#navigation a{color: black;margin: 15px;} .mywords{height: 40px;line-height: 40px;text-align: center;background-color: lightgray;}</style></head><body > <!--设置margin为0是图片与网页边框贴合--><div id="banner"><img src="../img/xiaolizi.JPG" > </div><div id="navigation"><a href="https://movie.douban.com/celebrity/1041029/" >小李子首页</a><a href="https://baike.baidu.com/item/%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A%C2%B7%E8%BF%AA%E5%8D%A1%E6%99%AE%E9%87%8C%E5%A5%A5/1243185?fromtitle=%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A&fromid=5753&fr=aladdin" >小李子简介</a><a href="https://movie.douban.com/celebrity/1041029/movies?sortby=time&format=pic" >小李子电影</a><a href="https://baijiahao.baidu.com/s?id=1596875990048142671&wfr=spider&for=pc" >小李子前女友</a><a href="https://www.sohu.com/a/231561754_115547">小李子最新爆料</a><a href="https://tieba.baidu.com/f?fr=ala0&kw=%C0%B3%B0%BA%C4%C9%B6%E0&loc=rec" >小李子互动</a> </div><div id="bottom" class="mywords" >小李子是我永远的梦中情人。。。</div></body>
</html>
案例4-进一步优化案例3
<!DOCTYPE html>
<html ><head><meta charset="utf-8"><title></title><style >html{background-color: azure;}body{margin: 0;}#banner img{width: 100%;height: 1000px;}#navigation{height:80px;line-height: 80px; text-align: center;color:black;}#navigation a{color: black;margin: 15px;} .mywords{height: 40px;line-height: 40px;text-align: center;background-color: lightgray;}.item{text-decoration: none;border-right:solid 1px #000000 ;padding:0 5px;}#navigation .last{border: none;}</style></head><body > <!--设置margin为0是图片与网页边框贴合--><div id="banner"><img src="../img/xiaolizi.JPG" > </div><div id="navigation"><a class="item" href="https://movie.douban.com/celebrity/1041029/" >小李子首页</a><a class="item" href="https://baike.baidu.com/item/%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A%C2%B7%E8%BF%AA%E5%8D%A1%E6%99%AE%E9%87%8C%E5%A5%A5/1243185?fromtitle=%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A&fromid=5753&fr=aladdin" >小李子简介</a><a class="item" href="https://movie.douban.com/celebrity/1041029/movies?sortby=time&format=pic" >小李子电影</a><a class="item" href="https://baijiahao.baidu.com/s?id=1596875990048142671&wfr=spider&for=pc" >小李子前女友</a><a class="item" href="https://www.sohu.com/a/231561754_115547">小李子最新爆料</a><a class="item last" href="https://tieba.baidu.com/f?fr=ala0&kw=%C0%B3%B0%BA%C4%C9%B6%E0&loc=rec" >小李子互动</a> </div><div id="bottom" class="mywords" >小李子是我永远的梦中情人。。。</div></body>
</html>- 选择器的优先级以及权重
a. 优先级
b. 权重
6. css文本属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.p1{color:red;font-family: "arial black";}.p2{font-size: 25px;}.p3{font-weight: bold;text-indent: 60px;}.p4{text-align: center;font-style: italic;text-decoration: underline;}.p5{line-height: 100px;background-color: darkslategray;}</style></head><body><ul><li class="p1">卡门·伊莱克特拉，1972年4月20日出生于俄亥俄州，美国演员、歌手、模特。<!--<img src="../img/kamen.jpg" >--></li><li class="p2">卡门·卡丝，1978年9月14日出生于塔林，爱沙尼亚超级名模。<!--<img src="../img/kamenkasi.jpg" >--></li><li class="p3">吉赛尔·邦辰生于巴西南里奥格兰德州霍里宗蒂那城，巴西超模、演员。<!--<img src="../img/bangchen.gif" >--></li><li class="p4">芭儿·莱法利，1985年出生于以色列的一个小村庄，父母以经营马场为生，模特、演员。<!--<img src="../img/baer.jpg" >--></li><li class="p5">丽芙·泰勒出生于美国纽约，美国影视演员。<!--<img src="../img/tyler.jpg" >--></li></ul></body>
</html>前端学习笔记-07post请求和get请求，样式以及CSS相关推荐
- 客户端（前端）Ajax中Get请求和Post请求的区别
我们在使用Ajax时,当我们向服务器发送数据时,我们可以采用Get方式请求服务器,也可以使用Post方式请求服务器.那么,Get请求和Post请求的区别到底在哪呢? GET请求 get是最常见的请 ...
- mvc ajax get请求,springMVC 中 ajax get 请求和 post 请求的坑以及参数传递
1, ajax 请求 无论为 post ,或者 get ,url中带有?形式的参数,后台都能以String类型变量接收,变量名称和参数名称必须一致 前台ajax: $.ajax( "prod ...
- AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交
关于AJAX发送POST请求,首先演示一个小案例. 当输入用户名:张三,密码:123.点击发送请求按钮 这是用post请求模拟的表单提交.接下来看一下如何用AJAX发送POST请求 后端代码: @We ...
- web前端学习笔记（最新）
web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
- 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...
- JSP、Servlet中get请求和post请求的区别总结
在学习JavaWeb最初的开始阶段,大家都会遇到HttpServlet中的doGet和doPost方法.前两天看<Head First Servlets & JSP>看到其中讲关于 ...
- java中的post的作用,JSP、Servlet中get请求和post请求的区别总结
在学习JavaWeb最初的开始阶段,大家都会遇到HttpServlet中的doGet和doPost方法.前两天看<Head First Servlets & JSP>看到其中讲关于 ...
- 前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动 一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字 二 ...
- iOS开发网络篇—GET请求和POST请求
一.GET请求和POST请求简单说明 创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http ...
最新文章
- 好多Javascript日期选择器呀-6
- java接口示例_【基础篇】java-接口及其示例
- 20210903 惯性环节1/(s+1)的各种响应
- Matrix Studio LeetCode 刷题指南
- axure怎么做5秒倒计时_装修隔音怎么做，进屋秒变“静音”模式
- mysql l日志分析,MySQL的截取与分析日志文件
- 多线程完成连续打印1-100的数字, 要求一条线程专门打印奇数,另外一条专门用来打印偶数
- 支付宝的商业与技术创新双轮驱动 创造数字时代普惠金融“奇迹”
- 信数金服：决策模型的迭代
- Django周总结一
- 跟我一起学docker(15)--监控日志和日志管理
- new 动手学深度学习V2环境安装
- jquery获取和设置属性_jQuery获取属性，设置属性，删除属性
- RedHat 安装 CentOS yum
- 全球与中国电子探针市场现状及未来发展趋势2022-2028
- artset下载_artset绘画软件下载
- 饥荒联机一直显示正在启动服务器,饥荒联机版一直正在启动服务器 | 手游网游页游攻略大全...
- Marlin固件 ---- G_Code 命令解析
- win10开热点后，手机连接显示IP配置失败（或显示正在连接中）
- 解读 2018：13 家开源框架谁能统一流计算？