网页设计daily study 01

最新推荐文章于 2024-06-15 16:35:35 发布
最新推荐文章于 2024-06-15 16:35:35 发布
阅读量210 收藏
点赞数 2
分类专栏： 网页设计daily study
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SeafyLiang/article/details/86542473
版权

响应式布局入门

  • Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
  • 核心-> media query 媒体查询 根据最大最小宽度识别设备，采用不同css
  1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

使用设备的宽度作为视图宽度并禁止初始的缩放。

user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。

  1. <link media = "(min-width: 500px)" rel="stylesheet" href="css/desktop.css">
  2. <link media = "(max-width: 500px)" rel="stylesheet" href="css/mobile.css">

500px以上则采用desktop.css；500px以下则采用mobile.css。

此处的px为理想宽度，理想宽度=物理宽度与DPR计算结果：viewportsizes.com 可以查各设备的px

  • Media Query

让CSS更精确作用于不同的媒介类型和同一媒介的不同条件。

是在页面的头部<head></head>之间加上下面这句∶

<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置∶

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

  • 通过checked伪类和label for实现菜单隐藏和显示
  1. Check：

# trigger : not(checked) ~  .toggle-item{

       display: block;

     }

       通过 :checked伪类选择器设置鼠标点击后的状态。

参考：https://juejin.im/entry/574e8d0e2e958a005e038297

  1. Label : for 属性规定 label 与哪个表单元素绑定。

参考：http://www.w3school.com.cn/tags/att_label_for.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 理想宽度=物理宽度与DPR计算结果：viewportsizes.com 可以查各设备的px -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式页面</title>
    <link rel="stylesheet" href="css/common.css">
<!-- media query 媒体查询 根据最大最小宽度识别设备，采用不同css-->
    <link media = "(min-width: 500px)" rel="stylesheet" href="css/desktop.css">
    <link media = "(max-width: 500px)" rel="stylesheet" href="css/mobile.css">
</head>
<body>
    <div id = 'title'>
        <h1>响应式测试</h1>
    </div>
    <div id = 'side-bar'>
        <!-- label for 表示label与该Id对应标签联结 -->
        <label id = 'toggle' for="menu">菜单</label>
        <!-- 使用check选择器的checked伪类和display实现菜单单击时显示隐藏效果 -->
        <input id = 'menu' type="checkbox">
            <div class = "bar">
                <a  href="index1.html">主页</a>
                <a  href="index1.html">刷新</a>
                <a  href="index1.html">主页</a>
            </div>
    </div>
    <h5 id = "a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro eius exercitationem consequatur, distinctio aut est autem vitae iure sed delectus velit. Animi vel quia hic! Iusto sapiente odio inventore doloremque ducimus debitis alias assumenda at perferendis ex iure, nostrum architecto vero quia totam placeat tenetur consequuntur earum. Accusamus, rerum voluptates!</h5>
    <hr>
    <h5 id = "a2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro eius exercitationem consequatur, distinctio aut est autem vitae iure sed delectus velit. Animi vel quia hic! Iusto sapiente odio inventore doloremque ducimus debitis alias assumenda at perferendis ex iure, nostrum architecto vero quia totam placeat tenetur consequuntur earum. Accusamus, rerum voluptates!</h5>
    <hr>
    <h5 id = "a3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro eius exercitationem consequatur, distinctio aut est autem vitae iure sed delectus velit. Animi vel quia hic! Iusto sapiente odio inventore doloremque ducimus debitis alias assumenda at perferendis ex iure, nostrum architecto vero quia totam placeat tenetur consequuntur earum. Accusamus, rerum voluptates!</h5>
</body>
</html>

效果图：

SeafyLiang
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于stm32单片机的老年人健康监测系统设计
qq_48771816的博客
06-20 3650
本次课题研究目的是对于老年人的健康监测系统的设计，此次设计的系统服务对象是针对那些长期独处在家的空巢老人和那些存在健康安全隐患的老年人，该系统的主要功能是对老年人的健康指标参数进行实时监控，意外摔倒检测、体温、心率血氧监测等，同时还可以通过远程通讯通知家人和家属，并及时向医院报告，实现对老年人是否摔倒和各项健康指标是否异常进行监测。如果有什么突发事件，可以立即进行急救。
网页设计daily study 02 百度地图API学习
SeafyLiang的博客
05-02 217
百度地图API 首先，你要去百度地图API网站申请一个密钥。官网-->http://lbsyun.baidu.com/ 然后，你要打开密钥的使用权，我设置的是*（所有网站均可使用） 接下来，你可以通过百度地图API网站上的Demo源代码去自己编写自己的地图，添加对应你想要的功能，这里说一下我所用的功能和碰到的问题。 我用到的功能：定位，导航仪（上下左右，缩放等），带导航的多点批...
Internet study
weixin_30293135的博客
04-29 77
（1） DAU : daily active user，日活跃用户数量 （2） MAU : 月活跃用户量 （3） ARPU : (Average Revenue Per User)即每用户平均收入，用于衡量电信运营商和互联网公司业务收入的指标。 （4） KPI :关键绩效指标法，是企业绩效考核的方法之一，其特点是考核指标围绕关键成果领域进行选取 （5） MOU : 平均每户每月通话时间(m...
网页原型设计工具设计_网页设计工具从下往下
culi4814的博客
07-29 275
网页原型设计工具设计There are several ways to handle the graphics required for a Website. The first, and easiest, is to simply steal — er, "borrow" — them from other sites. Honest designers and cyberbanditos ...
Technology Daily - 2019/03/17
onepedalo的博客
03-17 143
2019/03/17 Public Disclosure of Slack Single-Channel Guest Directory Iteration 全面理解Git TIOBE发布3月编程语言排行 如何写一篇合格的NLP论文 9个鲜为人知的用于数据科学的Python库 C++ 多线程编程总结 A complete computer science study plan to bec...
2020年房价趋势_2020年的9种网页设计趋势
weixin_26715991的博客
09-29 2755
2020年房价趋势 重点 (Top highlight)Many design trends posts act like art directors — practically guiding your hands on the mouse. This year, we’re doing trends different, by focusing on what actually matters...
计算机毕业设计——基于Python的班级管理系统
02-28 1021
对于现代化的班级管理系统而言，它的目的并不是减少教师的工作量，而是让教师们从繁琐的班级管理过程中解脱出来，将更多的关注点放到教学水平和教学技能上，这样就可以提高学校的教学水平，服务于更多的群众，所以开发本系统是十分有意义的。本课题在充分研究了在Django框架基础上，采用B/S模式，以Python为开发语言，MySQL为数据管理平台，实现的内容主要包括首页、个人中心、班级管理、学生管理、班干管理、课程信息管理、学生成绩管理、班级事件管理、班费支出管理、班级相册管理、班级音乐角管理等功能。
【计算机毕业设计】基于ssm的名宿推荐系统+LW
无边热爱，来日方长
06-15 732
互联网日益成熟，走进千家万户，改变多个行业传统的工作方式。民宿推荐管理以用户需求为基础，借由发展迅猛的互联网平台实现民宿推荐管理的信息化，简化旧时民宿推荐管理所需的纸质记录这一繁杂过程，从而大幅提高民宿推荐信息获取与传播速度。 基于此背景，本研究结合管理员即时发布民宿员工与用户的需求，设计并实现了民宿推荐系统。系统采用B/S架构，java语言作为主要开发语言，MySQL技术创建和管理数据库。系统主要分为管理员、用户和民宿员工三大功能模块。通过系统，管理员使用日常浏览器即可随时完成民宿推荐信息发布，契合民宿推
php网络硬盘的设计与实现,利用PHP开发网络硬盘管理系统
weixin_27064205的博客
03-10 400
摘要随着互联网技术的飞速发展和信息化建设的重视，越来越多的信息都以电子化、网络化的形式而存在。作为日常生活中数据涉及的沟通与存储工作，网络电子文档其价值正在日益提升。本文将要研究解决的问题是面对如此庞大的网络文件，在现有的软硬件技术，如何能高效、方便地对它们进行科学的管理起来。本文根据网络硬盘管理系统的发展现状，深入研究，以网络文件管理为核心，采用 PHP 技术，MySQL 数据库操作，JavaS...
Daily-Study
03-17
总的来说，"Daily-Study"项目是一个全面深入学习JavaScript的好资源，涵盖基础到进阶，理论到实践，静态网页到动态应用的各个层面。通过每天的学习和实践，不仅可以掌握JavaScript的核心技术，还能跟上这个快速发展...
daily-study:我的学习资料
06-28
dayly-study 层次结构 dp_lab-------------------------------------------------------------------设计模式 jcommander_lab-----------------------------------------------------------命令转换工具 jdk_lab----...
网页设计常用的英文单词.pdf
03-27
网页设计是创建和维护网站的过程，它涉及到许多专业术语和技术元素。以下是一些网页设计中常用的英文单词及其详细解释： 1. **About Us**: 这是介绍网站或公司背景的页面，通常包括公司的历史、使命和团队成员的...
leetcode下载-daily-study:每天学习
06-29
study every day 1.Two-sum Given an array of integers, return indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution. ...
daily-study:记录您每天学习的内容
05-06
2019-07-01 2019-07-02 2019-07-03 2019-07-04 2019-07-05 2019-07-06 2019-07-07 2019-07-08 2019-07-09 2019-07-10 2019-07-11 2019-07-12 2019-07-13 2019-07-14 2019-07-20 在JS中，组成重于继承是什么...
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
Chinadaily汉英词汇表：全面涵盖生活与专业术语
"Chinadaily汉英词汇表是一份非常实用的参考资料，包含了大量贴近生活的汉英词汇，包括电视、日常生活中常见的表达。这份词汇表更新至2002年3月24日，旨在帮助学习者扩大词汇量，理解和运用在不同情境中的英语表达。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值