实验三 使用CSS3
2024-05-09 07:58:14
实验三 使用CSS3
一、实验目的
1、体会HTML编程；
2、掌握CSS3
二、实验内容
- 创建如下图的框架页面，图片任选。下方左侧的菜单导航可以是静态的
- 实现下方页面的css布局。图片任选
要求首页部分的导航条实现当鼠标悬停时的反色显示
1.代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>copy</title><style type="text/css">#div001{background-color: aqua;}.div002{font-size: x-large;background-color: cadetblue;}.button001{font-size: large;background-color: blue;border-bottom: aqua;border-style: solid;}#selection1{float: left;width: 33%;background-color: cadetblue;}#selection2{float: left;width: 33%;}#selection3{float: right;width: 33%;background-color: cornflowerblue;}#tuijianwenzhang{font-size: 30px;}</style></head><body><div><img src="~M]V7L($21JQXOF8U}FO2{M.png" height="30%" width="100%"/></div><div id="div001"><button class="button001">首页导读</button><button class="button001">推荐版面</button><button class="button001">推荐文章</button><button class="button001">人气排名</button><button class="button001">新开讨论区</button><button class="button001">休闲娱乐</button><button class="button001">水木博客</button></div><selection id = "selection1"><br><br><br><div align="center"><input type="text" align=""> <input type="button" value="登陆"><br><br><input type="text"> <input type="button" value="申请"></div><br> iPhone12<br> 首页导读<br> 精华区<br> <input type="text" value="搜索讨论区"> <input type="button" value="Go"><br> iPhone12Bolg</selection ><selection id = "selection2"><div id="tuijianwenzhang">推荐文章</div><div><p>iPhone 12 Pro 系列</p><p>北京时间2020年10月14日，苹果公司发布6.1英寸的iPhone 12 Pro和6.7英寸的iPhone 12 Pro Max两款手机。</p><p>iPhone 12 Pro系列手机采用了全新光学图像稳定系统。这套系统的原理是在拍摄时，让摄像头传感器进行位移，而不是传统的镜头位移。iPhone 12 Pro手持拍摄时，曝光时间可以达到2秒。另外，iPhone 12 Pro还支持杜比视界HDR视频录制，相机会对每一帧画面进行实时优化，而且可录制4K 60fps视频。iPhone 12 Pro 支持众多5G频段，可在全球提供广泛的5G覆盖。 [38]iPhone 12 Pro Max是iPhone 12 系列及 iPhone 12 Pro 系列四款手机中仅有的配备120Hz显示屏与LiDAR的机型。其与iPhone 12 Pro一样，也配备A14处理器，支持双模5G通信，更高功率无线快充以及20W有线快充。 [12] iPhone 12 Pro Max拥有巨大的显示屏和超高分辨率，近350万颗像素成就高清观赏体验，其OLED显示屏的峰值亮度可达1200尼特。 [37]这两款机型同样采用OLED刘海屏，拥有石墨色、银色、金色和海蓝色四种不锈钢外观可选，容量均为128GB起步。</p></div></selection><selection id = "selection3"><br>2020年10月14日<br> 星期四<br><br><div class = div002>新开版面</div><br><br><div class = div002>推荐版面</div><br>新生.年轻.起飞</selection></body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="copy.css" type="texts"><title>copy</title>
</head>
<script>function drawract(){var c=document.getElementById("mycanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.fillStyle='white';ctx.fillRect(0,0,500,500);ctx.save();ctx.fillStyle='blue';ctx.fillRect(40,40,400,400);ctx.fillStyle='white';ctx.fillRect(80,80,300,300);ctx.fillStyle='blue';ctx.fillRect(120,120,200,200);ctx.fillStyle='black';ctx.font="30px 隶书";ctx.fillText("MARGIN 边界",20,20);ctx.fillStyle='white';ctx.font="30px 楷书";ctx.fillText("BORDER 框边" ,70 ,70 );ctx.fillStyle='black';ctx.font="30px 隶书";ctx.fillText("PADDING 填充",110,110 );ctx.fillStyle='white';ctx.font="30px 隶书";ctx.fillText("CONTENT 填充" ,120,180);}window.addEventListener("load",drawract,true);
</script><body>
<section id="daohangttiao"><img src="apple.png" /><div class="navbar"><ul><li><a href="#">首页</a><><li><a href="#">关于</a><><li><a href="#">相册</a><><li><a href="#">Blog</a><><li><a href="#">论坛</a><><li><a href="#">留言</a><></ul></div><h2>前言</h2>如果你想尝试一下不用表格来排版网页，而是用css来排版你的网页，也就是用长汀的DIY来编排你的网页结构。<br><ction><canvas id="mycanvas" width="500" height="500">你的浏览器不支持Canvas</canvas>边界就是该盒子与其他东西要保留多大距离。<br></ction>
</body>
</html>
实验三 使用CSS3相关推荐
- 实验三-密码破解技术
学 号 201421430010 中国人民公安大学 Chinese people' public security university 网络对抗技术 实验报告 实验三 密码破解技术 ...
- 计算机导论excel,[计算机导论实验三Excel.doc
[计算机导论实验三Excel 实验三 Excel表格处理 实验报告 姓名(学号):_______________ 年级(专业):_____ ________成绩:________ 实验时间:_____ ...
- 20155222卢梓杰 实验三 免杀原理与实践
实验三 免杀原理与实践 1.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧 实验步骤如下 1.先对实验二中生 ...
- 实验三 JSP应用开发进阶
全部:https://download.csdn.net/download/weixin_42859280/11218260 实验三 JSP应用开发进阶:PDF版本[已经完成所有代码] 想看文档上面有 ...
- 实验三：XML模型(一)
实验三:XML模型(一) 1 学时 2学时 2.实验目的与要求 通过实验,使学生理解XML模型的概念:能够掌握DTD的基本语法.作用和使用方式.要求学生能够根据XML文档推出满足要求的DTD文件,并 ...
- c语言程序设计江宝钏实验六答案,《C语言程序设计》(江宝钏著)实验三答案.doc...
<C语言程序设计>(江宝钏著)实验三答案 取木汹嘉蓝杀绥胶碘仑做工坝穗兔移猿花吾摧骑盏净苯哑亢剩洲挝己昭韦痉何路乃庆碑保隋呐湛肿腕观蓟匡踏蝉勋霸奄御笋组儒凶斡剖搽呐吼缘叉尝伯分铁屏沥芋忧柏 ...
- 2017-2018-1 20155222实验三 实时系统
2017-2018-1 20155222实验三 实时系统 1.学习使用Linux命令wc 基于Linux Socket程序设计实现wc(1)服务器(端口号是你学号的后6位)和客户端 客户端传一个文本文 ...
- R语言入门第四集 实验三：数据可视化
R语言入门第四集 实验三:数据可视化 一.资源 [R语言]R语言数据可视化--东北大学大数据班R实训第三次作业 在r中rowsums_R语言初级教程(15): 矩阵(下篇) R语言环境变量的设置 环境 ...
- 实验三 密码破解技术
中国人民公安大学 Chinese people' public security university 网络对抗技术 实验报告 实验三 密码破解技术 学生姓名 田学晓 年级 2014级 区 ...
最新文章
- c++性能优化之Profiler
- 程序的记事本--log4net
- nodejs创建rtmp-streamer服务器
- jQuery的入口函数
- Java学习资料-SimpleFactory
- c++循环执行一个函数_20川大计算机 | 时间复杂度，你避不开的一个考点
- ubuntu14.04 64bit主机下面安装android的NDK开发环境
- 关于 SAXParseException Content is not allowed in Prolog （前言中不允许有内容）
- [Python] L1-005. 考试座位号-PAT团体程序设计天梯赛GPLT
- 从C#中传递object到lua的一个问题
- 中国轨道交通设备行业建设投资规模及十四五产量趋势研究报告2021-2027年版
- android系统控件大全,安卓系统控件大全
- 夜间模式 css,网页夜间模式，CSS样式
- Java 常见摘要算法——md5、sha1、sha256
- (转)如何成为一名优秀的程序员？
- Python 二分查找：bisect库的使用
- cesium中级（二）获取地形高度
- PC微信最新版HOOK接口3.7.6.44
- cat5和cat5e的区别_具有功能以及CAT5与CAT6的CAT5电缆标准是什么？
- 【51nod1326】遥远的旅途