整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
