html,css学习笔记（第四天）
2024-05-24 08:04:13
01综合练习.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{font: 12px "simhei", Arial, Helvetica, sans-serif;color: #666;}body>div{width: 1000px;background-color: gold;margin: 0 auto;}#t_div>div,#b_l_div,#b_r_div>div{/*设置统一的背景色*/background-color: #e8e8e8;}#t_l_div{/*左上div*/width: 611px;height: 376px;float: left;}#t_r_div{/*右上div*/width: 375px;height: 376px;float: right;}body>div>div{/*解决子元素全部浮动时高度为0 的问题*/overflow: hidden;margin-bottom: 10px;}#b_l_div{width: 366px;height: 233px;float: left;}#b_r_div{float: right;}#b_r_div>div{width: 198px;height: 233px;float: left;margin-left: 10px;}/*左上区域样式*/#t_l_div>div{width: 245px;height: 232px;margin: 68px 0 0 36px;}.title_p{font-size: 32px;color: #333;margin-bottom: 12px;}.price_p{font-size: 24px;color: #0aa1ed;margin-bottom: 12px;font-weight: bold;}#t_l_div a,#t_r_div a{width: 132px;height: 40px;background-color: #0aa1ed;display: block;color: white;font-size: 20px;text-align: center;line-height: 40px;text-decoration: none;border-radius: 3px;}#t_l_div img{position: absolute;top: 30px;right: 20px;width: 318px;height: 319px;transition-duration: 1s;}#t_l_div{position: relative;}img:hover{transform: scale(1.1);}/*右上div*/#t_r_div>div{width: 253px;height: 232px;margin: 39px 0 0 25px;}#t_r_div img{position: absolute;bottom: 20px;right: 20px;width: 292px;height: 232px;transition-duration: 1s;}#t_r_div{position: relative;}/*左下div*/#b_l_div>div{width: 366px;height: 233px;background-color: #e8e8e8;}#top_div{height: 35px;background-color: #0aa1ed;border-radius: 2px;}#top_div>img{margin: 10px 0 0 10px;}#top_div>span{font-size: 16px;color: white;/*对某个元素位置进行微调通过相对定位*/position: relative;bottom: 5px;}.c_div{padding-left: 10px;}.c_div p{color: #62B5EC;margin: 23px 0 7px 0;}.c_div ul{margin: 0;padding: 0;list-style-type: none;overflow: hidden;}.c_div li{float: left;margin-right: 10px;}.c_div a{text-decoration: none;color: #0aa1ed;}/*右下div*/#b_r_div .title_p{margin: 8px 0 0 6px;font-size: 12px;font-weight: lighter;color: #000;}#b_r_div .price_p{margin-top: 6px;margin-bottom: 6px;font-size: 12px;font-weight: bold;color: #0AA1ED;text-align: center;}#b_r_div a{width: 100px;background-color: #0AA1ED;height: 24px;display: block;line-height: 24px;text-align: center;border-radius: 3px;font-size: 12px;margin: 0 auto;text-decoration: none;color: white;}</style>
</head>
<body>
<div><div id="t_div"><div id="t_l_div"><div><p class="title_p">灵越 燃7000系列</p><p>酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p><p class="price_p">￥4999.00</p><a href="">查看详情</a></div><img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png" alt=""></div><div id="t_r_div"><div><p class="title_p">颜值 框不住</p><p>酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p><p class="price_p">￥6888.00</p><a href="">察看详情</a></div><img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png" alt=""></div></div><div id="b_div"><div id="b_l_div"><div><div id="top_div"><img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png" alt=""><span>电脑,办公/1F</span></div><div class="c_div"><p>电脑整机</p><ul><li><a href="">笔记本</a></li><li><a href="">游戏机</a></li><li><a href="">台式机</a></li><li><a href="">一体机</a></li><li><a href="">服务器</a></li><li><a href="">联想</a></li></ul></div><div class="c_div"><p>电脑配件</p><ul><li><a href="">CPU</a></li><li><a href="">SSD硬盘</a></li><li><a href="">显示器</a></li><li><a href="">显卡</a></li><li><a href="">组装电脑</a></li><li><a href="">机箱</a></li></ul></div><div class="c_div"><p>外设/游戏</p><ul><li><a href="">键盘</a></li><li><a href="">鼠标</a></li><li><a href="">U盘</a></li><li><a href="">移动硬盘</a></li><li><a href="">游戏设备</a></li><li><a href="">智能单车</a></li></ul></div></div></div><div id="b_r_div"><div><img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" alt=""><p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p><p class="price_p">￥4600.00</p><a href="">查看详情</a></div><div></div><div></div></div></div>
</div>
</body>
</html>
第一次半成品网页。
02引入方式.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*css注释*/</style></head>
<body>
<!--给按钮添加点击事件 onclick是点击事件属性
alert() 弹出提示框 -->
<input type="button" value="按钮" onclick="alert('内联成功!')" >
<!--html注释-->
<script>//单行注释/*多行注释*//*浏览器控制台中输出内容*/console.log("内部成功!")
</script>
<!--引入外部的js文件-->
<script src="my.js"></script></body>
</html>
04页面相关方法.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div>这是div</div>
<p id="p1">这是p1</p>
<p id="p2">这是p2</p>
<input type="text">
<input type="button" value="按钮" onclick="f()">
<script>function f() {//得到页面中的divlet d = document.querySelector("div");//得到页面中的文本框let i = document.querySelector("input");//把文本框的值取出赋值给divd.innerText = i.value;}
</script>
</body>
</html>
05平方练习.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text">
<input type="button" value="平方" onclick="f()">
<div></div>
<script>function f() {//取出文本框和divlet i = document.querySelector("input");let d = document.querySelector("div");//判断用户输入的内容是否是NaNif (isNaN(i.value)){d.innerText = "输入错误!";return;}//把输入的内容平方后赋值给div NaN*NaN//字符串在进行-*/运算时会自动转成数值,如果转不成数值会转成NaN//d.innerText = i.value*i.value;//如果需要进行加法运算// d.innerText = i.value*1+i.value*1;d.innerText = parseFloat(i.value)+parseFloat(i.value);}
</script>
</body>
</html>
06计算器.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div></div>
<script>//得到页面中的元素对象let i1 = document.querySelector("#i1");let i2 = document.querySelector("#i2");let d = document.querySelector("div");function f(x) {if (isNaN(i1.value)||isNaN(i2.value)){d.innerText = "输入错误!";return;}switch (x) {case 1://加d.innerText = i1.value*1+i2.value*1;break;case 2://减d.innerText = i1.value-i2.value;break;case 3://乘d.innerText = i1.value*i2.value;break;case 4://除d.innerText = i1.value/i2.value;break;}}
</script>
</body>
</html>
07猜数字.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入1-100之间的整数">
<input type="button" value="猜一猜" onclick="f()">
<div></div>
<script>
//获取随机数
let x = parseInt(Math.random()*100)+1;
console.log(x)
let i = document.querySelector("input");
let d = document.querySelector("div");
let count=0;
function f() {count++;if (j.value>x){d.innerText = "猜大了!";}else if(i.value<x){d.innerText = "猜小了!";}else{d.innerText = "恭喜你第"+count+"次猜对了!";}
}</script>
</body>
</html>
08定时器.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>0</h1>
<script>let h = document.querySelector("h1");let count=0;//开启定时器let timer = setInterval(f,1000);function f() {console.log(count++);h.innerText = count;if (count==3){//停止定时器clearInterval(timer);}}//开启定时器setInterval(function () {console.log("===")},2000);//开启只执行一次的定时器setTimeout(function () {alert("时间到!");},3000);</script>
</body>
</html>
html,css学习笔记（第四天）相关推荐
- CSS学习笔记（四）CSS字体属性
属性 描述 font 简写属性.作用是把所有针对字体的属性设置在一个声明中. font-family 设置字体系列. font-size 设置字体的尺寸. font-size-adjust 当首选字体 ...
- CSS学习笔记(十四) 我们前端是怎么跟设计师沟通的
1.交付 一般设计师给前端的只有psd,没有其它多余的东西,连基本的文档都懒得给.前端期望中的设计能给予的除了psd之外, 还有设计上游岗位传递下来的东西. 比如: 产品原型, 需求文档, 交互文档等 ...
- 《Go语言圣经》学习笔记 第四章 复合数据类型
<Go语言圣经>学习笔记 第四章 复合数据类型 目录 数组 Slice Map 结构体 JSON 文本和HTML模板 注:学习<Go语言圣经>笔记,PDF点击下载,建议看书. ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
- CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范 顺序 布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
- CSS 学习笔记 - 网格布局（栅格系统）
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式 基本概念 属性说明 容器属性 内容属性 效果展示 grid-template-rows.grid-template-columns 基本用法 ...
- CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
- CSS学习笔记（详细）- 基础
CSS学习笔记从零开始 代码风格 样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器 基础选择器 标签选择器 类选择器 - 开发最常用 多类名 i ...
- css学习笔记 day two
CSS学习笔记 Day two 13.3 css边框属性 属性: 边框样式:border-style:solid/double/groove/ridge/insert/outset; 说明:第一个表示 ...
最新文章
- python ggplot为什么不能取代matplotlib_Matplotlib vs ggplot2
- 用户输入一个数字，找到所有能够除尽它的数的总个数
- Tomcat-部署多个项目（不同端口）
- python中不可以用来表示字符串_在Python中，不可以用来表示字符串的符号是____________。...
- 功能拆分简化权限操作，提高程序易用性
- J2Cache缓存的使用
- Charles开启代理后手机无法上网
- 压力测试常用专业名词解释
- 基于产生式规则的动物识别系统（Python）
- 2021年9月国产数据库排行榜：达梦奋起直追紧逼OceanBase，openGauss反超PolarDB再升一位...
- AD16布局流程及注意事项
- 2019一键清空朋友圈_新整理再见2019你好2020朋友圈励志说说
- 日常随笔——m1 macbook安装和配置qt
- MATLAB坐标轴位置调整
- 【金山文档】 2021级2021-2022学年第二学期大学物理实验考试表格-软件2112https://kdocs.cn/l/cmrTqjJ1ogsN
- 临沂大学计算机网络期末考试题,临沂大学2019版计算机网络实验指导书.pdf
- WebSocket 初识篇
- Nature子刊：研究者研制出胞内和胞外神经电信号同步采集的多模态电极
- pandas 字符串切片后保存_pandas:快速处理字符串方法
- uni-app day02