前端入门到熟悉day09

最新推荐文章于 2024-04-28 01:18:36 发布
最新推荐文章于 2024-04-28 01:18:36 发布
阅读量362 收藏
点赞数
分类专栏： 前端 css3 html5 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44160944/article/details/85268399
版权
前端 同时被 3 个专栏收录
31 篇文章 0 订阅
订阅专栏
css3
31 篇文章 0 订阅
订阅专栏
html5
31 篇文章 0 订阅
订阅专栏

尚德制作rem（rem讲解）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- rem (font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位

px换算成rem

具体像素/根字体的大小的像素

-->

<script>

// 获取根节点

var htmlBox = document.getElementById("htmlbox");

// 获取屏幕宽度

var widthP=document.body.clientWidth;

// 赋值 以iphone5为准 320

htmlBox.style.fontSize=widthP/16+"px"; // iphone5比例为准

// 320/16=20px

//375/16=23.4375px

//414/16=25.875px

</script>

 

 

<!DOCTYPE html>

<html lang="en" id="htmlBox">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="css/index.css">

<title>Document</title>

</head>

<body>

<div class="page01 main">

<img src="img/fullpage_01.jpg" alt="">

<img src="img/fullpage_02.jpg" alt="">

<img src="img/fullpage_03.jpg" alt="">

<img src="img/fullpage_04.jpg" alt="">

<h1>广州尚德<span class="text-red">学历中心</span></h1>

<h3>

大品牌<br/>

大机构<br/>

值得信赖

</h3>

<a href="javascript:;" class="btn">点击咨询</a>

</div>

<div class="page02 main">

<h1 class="text-red">2016年成人学历<br/>报考信息自助查询</h1>

<h3>自考·成人高考·远程</h3>

<ul>

<li><a href="javascript:;">报考条件</a></li>

<li><a href="javascript:;">报考条件</a></li>

<li><a href="javascript:;">报考条件</a></li>

<li><a href="javascript:;">报考条件</a></li>

<li><a href="javascript:;">报考条件</a></li>

<li><a href="javascript:;">报考条件</a></li>

<li><a href="javascript:;">报考条件</a></li>

<li><a href="javascript:;">报考条件</a></li>

<li><a href="javascript:;">报考条件</a></li>

</ul>

<a href="javascript:;" class="btn">时间查询</a>

</div>

<div class="page03 main">

<h1>高等院校自考<br/>

<span class="text-red">本科招生条件</span>

</h1>

<div class="text">

<p>1.中华人民共和国公民，以及港澳台同胞、海外侨胞，不受性别、年龄、学历、居住地等限制，均可报考。2.考生须通过有委托资质的正规培训机构进行审核报名。3.遵循并依据各地省委以及高等教育自考办发布的《报考简章》</p>

</div>

<div class="news">

<h2>考生提醒</h2>

<p>提前报考可申请免考高数和英语

错过需 延迟两年毕业

</p>

</div>

<a href="javascript:;" class="btn">报考查询</a>

</div>

<div class="page04 main">

<h1><span class="text-red">0基础学本科</span>常见问题汇总</h1>

<ul>

<li><a href="javascript:;">1:哪种成人学历含金量高?</a></li>

<li><a href="javascript:;">1:哪种成人学历含金量高?</a></li>

<li><a href="javascript:;">1:哪种成人学历含金量高?</a></li>

<li><a href="javascript:;">1:哪种成人学历含金量高?</a></li>

<li><a href="javascript:;">1:哪种成人学历含金量高?</a></li>

<li><a href="javascript:;">1:哪种成人学历含金量高?</a></li>

<li><a href="javascript:;">1:哪种成人学历含金量高?</a></li>

<li><a href="javascript:;">1:哪种成人学历含金量高?</a></li>

</ul>

<a href="javascript:;" class="btn">免费回电解答>></a>

</div>

<script>

//获取根节点

var htmlBox = document.getElementById("htmlBox");

// 获取屏幕宽度

var widthP=document.body.clientWidth;

//赋值

htmlBox.style.fontSize=widthP/16+"px";//以ip5为准

</script>

</body>

</html>

 

/* reset.css */

* {

padding: 0;

margin: 0;

}

html{

font-size: 20px;

}

 

a {

text-decoration: none;

}

img{

vertical-align: middle;

}

ul li{

padding: 0;

margin: 0;

list-style: none;

}

 

/* 公共样式 */

.main{

line-height: 1.65rem;

margin: 0.1rem 0;

box-sizing: border-box;

}

.main h1{

font-size: 1.65rem;

color: #3a3a3a;

}

.text-red{

color: #e93a57 !important;

}

.btn{

background: #2c3242;

padding: 0.5rem 1.1rem;

color: #fff;

font-size: 1rem;

display: inline-block;

}


 

/* 正式样式 */

/* 第一屏 */

.page01{

text-align: center;

background-color: #fafafa;

}

.page01 img {

width: 100%;

}

.page01 h1{

margin-top: -7.5rem;

}

.page01 h3{

margin: 1.5rem 0;

}

.page01 a{

margin: 2.5rem 0 3rem 0;

}

 

.page02{

background-color: #fff;

text-align: center;

}

.page02 h1{

padding-top: 1.8rem;

line-height: 2.2rem;

}

.page02 h3{

margin-top: 0.9rem;

font-size: 1rem;

}

.page02 ul{

width: 12.75rem;

overflow: hidden;

margin: 1.7rem auto;

}

.page02 ul li{

float: left;

margin-right: 0.1rem;

margin-bottom: 0.1rem;

}

.page02 ul li a{

display: block;

width: 4.15rem;

height: 1.5rem;

background-color: #646363;

font-size: 0.65rem;

line-height: 1.5rem;

color: #fff;

text-align: center;

}

.page02 .btn{

margin-top: 0.2rem;

}

.page02 ul li:nth-child(2) a{

background-color: #e93a57;

}

 

.page03{

text-align: center;

background: #f1f1f1;

margin-top: 1.35rem;

padding: 2rem 0;

}

.page03 h1{

line-height: 2.25rem;

}

.page03 .text{

width: 14.25rem;

margin: 0.5rem auto;

}

.page03 .text p{

line-height: 1rem;

font-size: 0.7rem;

}

.page03 .news{

width: 10.5rem;

height: auto;

margin: 1.1rem auto;

border: 0.05rem solid #000;

}

.page03 .news h2{

margin: -1rem auto 0;

background-color: #f1f1f1;

width: 5.5rem;

}

.page03 .news p{

font-size: 0.65rem;

padding: 0.9rem 0.5rem;

line-height: 1rem;

}

 

.page04 {

padding: 1.7rem 0.6rem;

text-align: center;

}

.page04 h1{

font-size: 1.5rem;

text-align: center;

}

.page04 ul{

margin-top: 1.2rem;

margin-bottom: 1.5rem;

}

.page04 ul li{

margin-bottom: 0.25rem;

}

.page04 ul li a{

display: block;

color: #3a3a3a;

width: 95%;

margin: 0.1rem auto;

background-color: #eaeaea;

padding: 0.25rem 0.4rem;

text-align: left;

}

 

小忆（华仔）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端从入门到精通
m0_74219427的博客
10-20 1784
web前端从入门到精通 第1、2、3周
前端入门-精通
qiafwndashi的博客
03-09 118
1.代码都是英文的,字符也同样是英文的,所以我们在写代码的时候 一定要注意 给输入法也换成英文,字符也默认成英文,方便我们快捷写出代码.这三个插件是帮助我们更好的使用Visual Studio Code,高效的写出代码,并且有提示代码段功能,前端入门必备.1.多数前端工作者使用的是 Visual Studio Code 因为其使用非常便捷所以其饱受热爱.3.写出样式之后,我们文件里 输入 英文的 感叹号!2.如何快捷写出html呢,只需要打开创建到文件夹一个文件,这样我们的一个简单的html就写好了.
2024小白一看就懂的前端学习路线图，零基础到精通
最新发布
2401_84433570的博客
04-28 883
掌握jQuery常用API的使用方法，并且能够熟悉jQuery的插件开发机制。掌握原生响应式实现机制，能够使用Bootstrap中的栅格式布局和响应式布局进行复杂页面的布局开发。充分理解AJAX原理，掌握JS原生和jQuery方式的AJAX使用。掌握jQueryUI的使用，快速高效实现页面的效果呈现。学会了这些技能，你就能够独立制作电商类、企业类网站，实现常见JS动态效果，并且能够基于jQuery、Bootstrap等框架实现炫酷的效果和复杂的功能啦！掌握HTML5、CSS3在移动端的使用技巧。
前端从入门到精通（记录自己的前端学习之路）都是一些自己做的笔记
a2811908732的博客
08-15 714
一、网页界面的基础认知 ①网页由哪些组成：音频、视频、超链接、图片、文字 ②我们看到的网页背后的本质是：（右击查看网页源代码）前端程序员写的代码 ③前端的代码是通过什么软件转换成用户眼中的页面的：通过浏览器转化（解析和渲染）成用户看到的网页 ④常见的五大浏览器：IE，火狐（Firefox），谷歌（Chrome），Safari浏览器（苹果系统自带的），欧朋（opera） 渲染引擎不同（浏览器内核）：浏览器中专门对代码进行解析渲染的部分 ⑤web标准：结构：HTML（页面元素），表现：CSS（页面样
Web前端从入门到精通
syqzxz的博客
11-07 725
学习记录，学习笔记
前端学习之路 (入门到超级精通)
ef_ef的博客
01-25 526
第一步： html和css HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征： 正则表...
学习前端-HTML-day01
08-17
学习前端-HTML-day01
Java入门基础学习资料day09-10
10-22
day09【继承、super、this、抽象类】 day10【接口、多态】 day11【final、权限、内部类、引用类型】 此课程全部课程资料获取： JavaEE基础学习资料地址汇总：...
计算机前端-核心编程day3-09curl.mp4
06-05
计算机前端-核心编程day3-09curl.mp4
本人博客python爬虫入门案例day09
08-10
供学习本人博客python爬虫入门案例day09使用
python从入门到精通（DAY 2）
09-21
本文是python从入门到精通系列文章的第二篇，主要给大家简单讲解下Python的字典复制和内置函数，非常简单实用，需要的小伙伴可以参考下
css div自定义属性,一款使用CSS自定义属性实现的时间轴布局
weixin_39685024的博客
08-04 215
CSS语言：CSSSCSS确定.timeline {--uiTimelineMainColor: var(--timelineMainColor, #222);--uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff);position: relative;padding-top: 3rem;padding-bottom: 3re...
前端资源分享（从入门到精通）
赵乘风_i
01-08 5041
  分享一波资源   上个博客分享了我这一段时间来学习前端的方法以及春招秋招的经历。话不多说，上一波干货。 很多人说以下资源失效了。最近重新写了一篇文章，收集了这些资源       https://mp.weixin.qq.com/s/vnzApo412HWLXrQfBcZQzA ps:   有什么问题可以问我，我一定知无不言言无不尽哈哈；想要前端资源或其他开发资源，我这还是有一些的。...
Web前端从入门到精通237全集视频都在这里！
xiaoxijing的博客
02-15 1881
Web前端是当下互联网时代下最流行的技术之一。Web前端是利用HTML、CSS、JavaScript等专业的技能和相关的工具，将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，进而去处理视觉和交互的相关问题。 因此，Web前端一套完整的教程中，所涉及的内容也非常丰富，比如：HTML基本结构与属性、web前端三大核心技术、表格标签、CSS语法格式等。很多人想在网上学习Web前端技术，网...
黑马程序员：从零基础到精通的前端学习路线
热门推荐
黑马程序员官方博客
07-29 1万+
随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！   那么前端开发到底需要学什么？应该怎
前端入门到熟悉day20
weixin_44160944的博客
02-25 112
计时器使用 01数码时钟 02数码时钟charAt 03Date对象 04延时消失 05运动基础 06无缝滚动 07无缝滚动 08无缝滚动左右 09鼠标开启关闭定时器 10左右控制器 01点击事件 onclick 事件会在元素被点击时发生。 02document 03event事件对象 Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状...
新手必看 学前端从入门到精通要经历哪些过程
qf2019的博客
02-19 548
Web前端作为目前火热的行业，其高薪资吸引了越来越多的人进入行业，对于零基础学员而言，学习web前端，从入门到精通要经历哪些阶段？下面，小编就给大家分享一下。 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美...
Web前端从入门到精通自学之路
qq_36272264的博客
09-16 840
先说一下学习完web前端之后能干什么 学完web前端之后你可以开发网页，做h5动画，做手机端app，可以做自己的博客网站，可以做微信公众号开发，可以开发小程序，可以结合nwjs做电脑客户端软件：比如微信的pc版，钉钉的pc版 都是web前端来做的 感兴趣的可以加入我的前端学习交流群，里面有大量学习素材，dalao在线指导，欢迎加入~1145459155 怎么开始学习 两条路：自学或者找培训班， 找培训班的话，我推荐达内和传智播客，在国内讲师质量都比较高。这块我们一点就过， 我主要讲下怎么去自学。 对于自学最
一小时前端技术从入门到精通(放弃)
Alisa_vc的博客
09-08 255
2020求知讲堂：HTML5+CSS3 Web前端入门与进阶
2020求知讲堂web前端（html5+css3）(Day1)课程内容涵盖了web前端开发的基础和进阶学习，适合初学者和希望提升技能的专业人士。课程大纲分为基础阶段和深度学习阶段，分别聚焦于HTML5与CSS3技术。 在基础阶段，学员...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值