整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
80余家媒体集中发布2023年度媒体社会责任报告
2023年度媒体社会责任报告近日集中向社会发布。这是媒体社会责任报告工作开展以来，连续第11次发布报告。今年，从中央新闻单位到县级融媒体中心580余家媒体发布报告，发布媒体数量继续增加，部分省区市和新疆生产建设兵团进一步扩大报告范围。
2023年，新闻战线坚持以习近平新时代中国特色社会主义思想为指导，以学习宣传贯彻党的二十大精神为主线，深入学习宣传贯彻习近平文化思想，深刻领悟“两个确立”的决定性意义，增强“四个意识”、坚定“四个自信”、做到“两个维护”，充分发挥主渠道主阵地主战场的主力军作用，大力宣传党的理论和路线方针政策，进一步发展壮大主流价值、主流舆论、主流文化。特别是在深入开展学习贯彻习近平新时代中国特色社会主义思想、贯彻落实全国宣传思想文化工作会议精神、第三届“一带一路”国际合作高峰论坛、“高质量发展调研行”等重大主题、重要会议和重要活动的宣传报道中，广大新闻工作者强化责任担当，守正创新，奋发有为，以高度政治自觉、饱满精神状态做好新闻舆论工作，不断巩固壮大新时代主流思想舆论，彰显新闻战线的好形象、好作风。
各报告媒体按照中宣部、中国记协印发的《媒体社会责任报告制度实施办法》要求，从政治责任、阵地建设责任、服务责任、人文关怀责任、文化责任、安全责任、道德责任、保障权益责任、合法经营责任等方面，对2023年履行社会责任情况进行报告。其中，近400家媒体还同期制作了短视频、动漫、H5、长图等多媒体版报告，350多家媒体制作发布展示海报，部分媒体召开报告发布会、座谈会。
中国记协新闻道德委员会、产业报行业报新闻道德委员会和各省区市新闻道德委员会将对媒体发布的报告开展评议打分。
来源：新华社
段时间没写文章了，这段时间比较忙，很抱歉。
今天的这个手机登录界面，使用了rem作为单位，自定义了字体，使用了模糊背景，半透明登陆框。效果是小编从网上看到的，就动手实现了下，分享给在座的诸位。小编才疏学浅，如果有什么不对或许要改进的地方，还望各位不吝赐教。
我们先来看下效果图：
1、目录简单介绍下
images 放图片
fonts 字体、字体图标
css 样式表文件
base.css 基础样式
login.css login界面样式
image
js javascript文件
flexible.js rem转换px文件
login.js login页面的其他js
login.html 登录页面
2、base.css文件：我们在 base.css 中定义字体、边距、填充等，这里只指出一些关键点，想要源码的话可以关注我们，然后再私信我们，我们会发给您。
① 通过效果图，我们可以看到，placeholder提示文字是白色，所以在这里需要更改下：
input::-webkit-input-placeholder{
color:#fff;
}
② 定义字体，这里只用了ttf，因为手机下大部分都是webkit内核，webkit内核是支持ttf格式的字体的。
@font-face {
font-family: 'PingFangSC-Regular';
src: url('../fonts/PingFangSC-Regular.ttf');
font-weight: normal;
font-style: normal;
}
③ 初始化字体大小，字体类型等
body,input{
font-size: .26rem;
font-family:'PingFangSC-Regular';
color:#fff;
}
注：1、其他的边距、浮动、flex等，就不在这里写了，源码里面的base.css文件写的很清楚
2、rem单位，后面会有解释
3、由于有 flexible.js ，这里的html设置的字体大小无需我们设置。
3、flexible.js 文件可以将rem转换成px，自动设置html的字体大小，这样rem的值就会被浏览器根据html的字体大小实时解析成px，以适应不同分辨率的手机。我们需要做两步：
① 在头部引入 flexible.js，让它一上来就执行：
<script type="text/javascript" src="./js/flexible.js"></script>
② 打开 flexible.js，找到最后一行，将两个传参改成设计稿的宽度，我这里设计稿是720，所以，修改如下：
;(function(designWidth, maxWidth) {
...
})(720, 720);
那么，在量出设计稿的像素值，在css中，除以100，就是rem。
4、新建login.html，放在根目录，在header头部加入下面的代码，让页面宽度等于手机宽度，并且禁止缩放：
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
5、在login.html的header加入下面的代码，禁止手机将页面中的号码格式化，否则影响美观：
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
6、引入相关css、js，这里不多说了。
至此，准备工作完成了，下面开始编写页面了。
背景高斯模糊，就不能直接设置到body上，否则body里面的内容都会高斯模糊，所以单独写个section，来设置
<section class="bg"></section>
.bg{
background:url(../images/bg.jpg) no-repeat center/cover;
position: fixed;
z-index: 1;
top:0;
left:0;
right:0;
bottom:0;
filter:blur(15px);
}
效果图如下：
出问题了，高斯模糊导致周边变淡，玩过PS的都知道这个问题。我们只需要将背景容器放大点，超出body就行了，所以，修改后的css如下：
.bg{
background:url(../images/bg.jpg) no-repeat center/cover;
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
filter:blur(15px);
transform:scale(1.1);
}
效果图如下：
注：因为背景定位了，所以里面的内容都要定位并且z-index都要比它高。
页面的内容上下居中，无论什么分辨率，内容始终在中间：
1、给body挂上 flex flex-middle，这个是在base里面定义好的flex样式
<body class="flex flex-middle">
2、既然要垂直居中，body的高度肯定要100%，html也要设置，否则，body的100%没作用：
body,html{
height: 100%;
}
.wrap{
padding:0 .85rem;
position: relative;
z-index: 2;
}
3、这个wrap就是居中容器，所有的内容都放里面：
<section class="wrap"></section>
header比较简单，要注意“Welcome”，有阴影，这里不能用盒子阴影box-shadow，而是用文字阴影text-shadow，它比box-shadow少个参数，即扩展。根据UI，测量的尺寸都除以100就是rem的值，如130px，这里就写1.3rem就可以了
.header h1{
font-weight: normal;
font-size: 1rem;
text-shadow: 0 0 4px rgba(0,0,0,.5);
text-align: center;
}
.header p{
font-size: .22rem;
text-align: center;
line-height: 1.8
}
<header class="header">
<h1>Welcome</h1>
<p>
Lorem ipsum sit amet,consectetur adipiscing dlit. Donec auctor neque sed pretium luctus.
</p>
</header>
效果如下
这个主要是头像、输入框和提交按钮，都比较简单，就不多说了。边框小编设置的粗细是0.5px，这里并不代表边框粗细就是0.5px。因为现在手机大部分都是视网膜屏，物理分辨率都是逻辑分辨率的2倍多，这里设置的0.5px是逻辑分辨率，转换成物理像素大概就是1px。
.avatar{
width: 1.5rem;
height: 1.5rem;
display: block;
margin: auto;
border-radius: 999px;
border:.5px solid #fff;
box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
}
.row *{
height:.85rem;
line-height: .85rem;
width: 100%;
text-align: center;
border-radius: 999px;
box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
}
.row .ipt{
background: transparent;
border:.5px solid #fff;
}
.row .submit{
background:linear-gradient(to bottom,#25af61,#149c4f);
border:0 none;
display: block;
border:.5px solid #33c773;
}
<section class="main mt110">
<img class="avatar" src="./images/avatar.jpg">
<section class="row mt25">
<input type="text" class="ipt" placeholder="User Name">
</section>
<section class="row mt25">
<input type="password" class="ipt" placeholder="Password">
</section>
<section class="row mt25">
<a href="javascript：;" class="submit">Login</a>
</section>
</section>
六、版权
这个没什么好说的，居中，定位在底部
.copy{
position: absolute;
bottom: .2rem;
left: 0;
right: 0;
z-index: 2;
font-size: .23rem;
}
<footer class="copy tc mt40">
? 2019 IT学堂
</footer>
最终效果如下
想要源码的话可以关注我们，然后再私信我们，我们会发给您。关注IT学堂，有更多干货哦！
Web领域的一些基本概念。
Web（World Wide Web）叫全球广域网，俗称万维网（www）。
W3C（World Wide Web Consortium）叫万维网联盟，是国际最著名的标准化组织，制定了web标准。
一个网页包含了html元素 Css JavaScript，Html元素决定了网页结构，Css进行了修饰美化，JavaScript控制了交互行为和动态效果。
web标准包含了下面三个方面：
Html不是一种编程语言，而是描述性的标记语言，主要作用是定义内容的结构。
2014年10月万维网联盟（W3C）完成了HTML5标准制定，是目前最新的HTM版本。
HTML5的出世，标志着web进入一个富客户端（具有很强的交互性和体验的客户端程序）时代，像APP网页，小程序都是HTML5的应用场景。
Html5新特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--字符集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="关键词" />
<meta name="Description" content="页面描述" />
<title>页面标题</title>
</head>
<body>
</body>
</html>viewport用户网页的可视区域，一个针对移动网页优化的页面 viewport meta 标签如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">head区域元素：
meta title style link script base。
body区域元素：
块级元素：每个元素都是独占一行
行内元素：元素在同一行水平排列
inline-block：元素可以排列在同一行显示，并且可以设置一些块元素属性
通过Css：display:inline-block 改变元素。
很多元素都自带了默认样式，不同浏览器下默认样式表现不一致，为了统一或者满足一些需求我们需求将所有默认样式清空，这种处理方式又称为 Css Reset，比如：
*{
margin: 0;
padding: 0;
}另外一种方案使用normalize.css，它将不同浏览器下的默认样式进行了统一，
https://github.com/necolas/normalize.css
html中的单位是像素px
绝对单位
相对单位
属性：字体、行高、颜色、大小、背景、边框、滚动、换行、修饰属性（粗体、斜体、下划线）
p{
font-size: 20px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字体类型：显示PingFang SC，没有就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体或写（400｜500｜600）*/
font-variant: small-caps; /*小写变大写*/
}行高（line-height）
一般约定行高、字号都是偶数，这样保证它们的差一定偶数除2得到整数，如下图所示：
line-height
文本垂直居中
对于单行文本可以设置行高=盒子高度。
对于多行元素的垂直对齐，我们可以使用vertical-align: middle属性，不过vertical-align 仅适用inline、inline-block 和 table-cell 元素。
vertical-align
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定长度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;内容溢出处理
filter:gray()理解优先级很重要，有助于我们排查一些问题。浏览器将优先级分为两部分：HTML的行内样式和选择器的样式。
行内样式
行内样式是直接作用在元素，它的优先级高于选择器样式，使用！important可以提高样式表的优先级。
<div style="font-size:16px">
</div>选择器样式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">优先级规则如下：
优先级
我们通过下图这种标记方式，就可以判断出选择器的优先级。
优先级
两条经验法则
由多个基础选择器组合成的复杂选择器。
多个基础选择器连起来（中间没有空格）组成一个复合选择器（如：ul.nav）。复合选择器选中的元素将匹配其全部基础选择器，.box.nav 可以选中 class="box nav" ，但是不能选中 class="box"。
用于选中某种特定状态的元素，优先级（0，1，0）。
:nth-child(an+b)
更多参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS
伪元素选择器可以向HTML标记中未定义的地方插入内容，优先级（0，0，1）。
属性选择器用于根据HTML属性进行匹配元素，优先级（0，1，0）。
本文要点回顾，欢迎留言交流。
*请认真填写需求信息，我们会在24小时内与您取得联系。
