1. 👨🎓 website title
Design and production of 🍵Tea culture website, 🏳️🌈Chinese traditional cultural themes, Peking Opera culture🔏 ink painting and calligraphy, Chinese folk New Year painting culture and art website, etc.
2. ✍️ Website description
🏷️ This homepage code uses the use of DIV boxes, such as the use of box nesting, floating, margin, border, background and other attributes, the outer large box is centered, the inner left, middle and right layout, and the lower horizontal floating arrangement, university study The front-end knowledge points and layout methods are used, and the amount of CSS code is also very large and detailed. Use hover to complete transition effects, mouse over effects, etc., and use tables and forms to supplement modules. For the convenience of newcomers, individual source code pages If you don't use js, you can add it yourself if you need it.
🏅 A set of high-quality 💯 web design should include (specifically according to individual requirements)
- The page is divided into four parts: header, menu navigation bar (preferably drop-down), middle content section, and footer.
- All pages are hyperlinked to each other, and can go to the third-level page, which consists of 5-10 pages.
- The unified layout of page styles and styles is displayed normally, not messy, using Div+Css technology.
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally.
- There must be JS special effects, such as timing switching and manual switching of picture rotation.
- There are multimedia elements in the page, such as gif, video, music, the use of form technology.
- The page is refreshing, beautiful, generous, and different. .
- It must not only be able to present the content required by users, but also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.
3. 📚 website introduction
📔 Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has a stable display effect.
📓Website programming: It is planned to use the latest web programming language HTML5+CSS3+JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers on the market, and the effect of seeing the website immediately after opening it has been achieved.
📘Website materials: We plan to collect good-looking picture materials from various platforms, and carefully select pictures that are suitable for the style of the web page, and then use PS to make pictures suitable for the size of the web page.
📒Website files: The types of website system files include: html web page structure file, css web page style file, js web page special effect file, images web page picture file;
📙Web page editing: The code of web works is simple, and you can use any HTML editing software (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ and other html editing software to run, modify, edit, etc.).
in:
(1) The 📜html file contains: index.html is the home page, and other html are secondary pages;
(2) 📑 css files include: css all page styles, text scrolling, image enlargement, etc.;
(3) 📄 js files include: js implements dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).
4. 🌐 Website Demo
5. ⚙️ Website code
🧱HTML structure code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quality of life column group</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="top">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="tel"><img src="images/tel.jpg" /></div>
</div>
<div class="dh">
<ul>
<a href="index.html"><li class="current">Home page</li></a>
<a href="company.html"><li>Company Profile</li></a>
<a href="road.html"><li>Enterprise Road</li></a>
<a href="video.html"><li>Marketing video</li></a>
<a href="brand.html"><li>brand booster</li></a>
<a href="picture.html"><li>product sales sheet</li></a>
<a href="join.html"><li>Merchants to join</li></a>
<a href="center.html"><li>case Center</li></a>
<a href="team.html"><li>column team</li></a>
<a href="news.html"><li>news</li></a>
</ul>
</div>
<!-- banner picture start -->
<div class="main_visual">
<div class="flicking_con">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="main_image">
<ul>
<li><span class="img_1"></span></li>
<li><span class="img_2"></span></li>
<li><span class="img_3"></span></li>
<li><span class="img_4"></span></li>
</ul>
<a href="javascript;" id="btn_prev"></a>
<a href="javascript;" id="btn_next"></a>
</div>
</div>
<!-- banner end of picture -->
<!-- Product system starts -->
<div class="prodect">
<div class="prodect_blank"> </div>
<div class="prodect_search">
<div class="search_kuang">
<form action="#">
<input type="text" style="width:228px; height:24px; border:none; background:url(images/search.jpg) no-repeat; padding-left:5px" />
</form>
</div>
<a href="#"><div class="search_button"></div></a>
<div class="search_link"><a href="#">Marketing Video</a> <a href="#">Video promotion</a> <a href="#">case Center</a> <a href="#">Senior Team</a></div>
</div>
<div class="prodect_blank1"></div>
<div class="prodect_top" style="font-family:'Microsoft Yahei'">Marketing TV Column Video <strong>Product System</strong></div>
<div class="prodect_blank1"></div>
<div class="prodect_pic">
<div class="prodect_xx">
<ul>
<a href="#"><li><div class=" prodect_ WZ "></div><div class=" prodect_ Wz2 "> Record the growth of Chinese businessmen all over the world, <br /> Light up the wise life and share the quality life </div></li></a>
</ul>
</div>
<div class="prodect_cp">
<ul>
<a href="#"><li><div class=" prodect_ WZ "></div><div class=" prodect_ Wz2 ">Enhance the value of your corporate brand <br />Let your customers trust you </div></li></a>
</ul>
</div>
<div class="prodect_zs">
<ul>
<a href="#"><li><div class=" prodect_ WZ "></div><div class=" prodect_ Wz2 "> Make every product different, <br /> Shaping value is no longer a problem </div></li></a>
</ul>
</div>
<div class="prodect_sp">
<ul>
<a href="#"><li><div class=" prodect_ WZ "></div><div class=" prodect_ Wz2 "> helps you to open up market channels, <br /> allows you to quickly seize market share </div></li></a>
</ul>
</div>
<div class="prodect_tg">
<ul>
<a href="#"><li><div class=" prodect_ WZ "></div><div class=" prodect_ Wz2 "> Let your customers find you, <br /> Make sales easier </div></li></a>
</ul>
</div>
</div>
<div class="prodect_wz3" style="font-family:'Microsoft Yahei'; letter-spacing:3px; color:#393939; font-weight:600">TV column marketing video you deserve to have<br /><span style="font-size:15px; letter-spacing:1px;">National consultation and hotline:<span style="color:#e10100">010-57296057</span></span></div>
</div>
<!-- End of product system -->
<!-- Choose a reason to get started -->
<div class="reason">
<div class="reason_wz"></div>
<div class="reason_wz" style="font-family:'Microsoft Yahei'; letter-spacing:8px;">choose quality life <span style="color:#ba0005; font-weight:bold">Four reasons</span></div>
</div>
<!-- choose reason end -->
<!-- first reason to start -->
<div class="reason1">
<div class="reason1_blank"></div>
<div class="reason1_wz" style="font-family:'Microsoft Yahei'; font-weight:bold;">The program is combined with the promotional video, and the host is interviewed!</div>
<div class="reason1_wz1">
☆ 15 Years of experience in film and television marketing, founder of marketing video<br />
☆ The largest network marketing training group in the country-The only officially designated marketing video service organization of Shanren Information<br />
☆ The first professional film and television production institution in China to establish a marketing video theory system<br />
☆ The only video marketing agency in China that integrates production and promotion services<br />
☆ Served the world's top 500 companies and helped thousands of customers achieve sales improvement</div>
</div>
<!-- The first reason ends -->
<!-- The second reason starts -->
<div class="reason2">
<div class="reason2_nr">
<div class="reason2_blank"></div>
<div class="reason2_wz" style="font-family:'Microsoft Yahei'; font-weight:bold;">The promotional video is broadcast with the TV station logo</div>
<div class="reason2_wz1">
☆ Co-creative team - covering eight major economic zones and 20 cities in China<br />
☆ There are more than 30 independent partners such as professional screenwriters, creative directors, senior planners, etc.<br />
☆ First-line production team - 50 contracted directors and independent producers<br />
☆ 100 More than 30 professional linkage production institutions; more than 30 distributed post-production computer rooms
</div>
</div>
</div>
<!-- The second reason ends -->
<!-- The third reason begins -->
<div class="reason3_blank"></div>
<div class="reason3">
<div class="reason1_blank"></div>
<div class="reason1_wz" style="font-family:'Microsoft Yahei'; font-weight:bold;">Have a professional team</div>
<div class="reason1_wz1">
☆ 30 An official cooperative video publishing platform<br />
☆ 400 Home Central & Local News & Marketing Sites<br />
☆ 150 most popular social media<br />
☆ Weibo and WeChat 600 million fans publishing platform<br />
☆ 10 A network fragmented traffic advertising network platform
</div>
</div>
<!-- The third reason ends -->
<!-- The fourth reason begins -->
<div class="reason4">
<div class="reason2_nr">
<div class="reason4_blank"></div>
<div class="reason4_wz" style="font-family:'Microsoft Yahei'; font-weight:bold;">Powerful value-added service system</div>
<div class="reason4_wz1">
☆ Video network promotion system<br />
☆ Regular monthly video promotion training courses<br />
☆ Create files for customer videos and provide free upgrade and modification services<br />
☆ Youku video on the official website to remove the advertising code
</div>
</div>
</div>
<!-- The fourth reason ends -->
<!-- flow chart start -->
<div class="process" style="font-family:'Microsoft Yahei'">Six service processes of quality life</div>
<div class="process_pic">
<a class="process_pic1" href="#"><img src=" images/8-1.png "width=" 132px "height=" 178px "/><span><div class=" process_ Newnr ">Marketing Plan <p> helps you do positioning analysis, refining Differentiated selling points of products, clear consumer groups; help you sort out marketing models and formulate marketing plans. </p></div></span></a>
<a class="process_pic2" href="#"><img src=" images/8-1.png "width=" 132px "height=" 178px "/><span><div class=" process_ Newnr ">Creative Ideas <p>Creative scripts based on marketing plan, making the selling point and brand concept of the product easier to spread and easier to be remembered by consumers. </p></div></span></a>
<a class="process_pic2" href="#"><img src=" images/8-1.png "width=" 132px "height=" 178px "/><span><div class=" process_ Newnr ">Shoot <p>Professional filming team Shoot based on creative script. </p></div></span></a>
<a class="process_pic2" href="#"><img src=" images/8-1.png "width=" 132px "height=" 178px "/><span><div class=" process_ Newnr ">Post-production <p>Complete filming based on creative scripts. </p></div></span></a>
<a class="process_pic2" href="#"><img src=" images/8-1.png "width=" 132px "height=" 178px "/><span><div class=" process_ Newnr ">Network Promotion and TV Show<p>Help you in Youku, Ku6, Tudou and other video sites to promote videos and optimize them to the Baidu homepage. </p></div></span></a>
<a class="process_pic2" href="#"><img src=" images/8-1.png "width=" 132px "height=" 178px "/><span><div class=" process_ Newnr "> Promote Training <p> Promote Web-wide methods of promotion through Half-day training delivered to the client team. </p></div></span></a>
</div>
<div class="process_blank"></div>
<!-- Flowchart ends -->
<!-- Split dotted line starts -->
<div class="dotton_line"></div>
<!-- end of split dash -->
<!-- Frequently encountered problems begin -->
<div class="problem_top"></div>
<div class="problem_pic"></div>
<!-- Frequently Asked Questions End -->
<!-- Split dotted line starts -->
<div class="dotton_line2"></div>
<!-- end of split dash -->
<!-- partner start -->
<div class="links_blank"></div>
<div class="links_title"></div>
<div class="links_blank"></div>
<div class="links">
<ul>
<a href="#"><li><img src="images/cctv.jpg" /><br />Quality Life Partner_CCTV</li></a>
<a href="#"><li><img src="images/cctv2.jpg" /><br />Quality Life Partner_CCTV</li></a>
<a href="#"><li><img src="images/BTV.jpg" /><br />Quality life partner_BTV official website</li></a>
<a href="#"><li><img src="images/hd_news.jpg" /><br />Quality Life Partner_Haidian News</li></a>
<a href="#"><li><img src="images/sina.jpg" /><br />Quality Life Partner_Sina</li></a>
<a href="#"><li><img src="images/qq_pic.jpg" /><br />Quality Life Partner_Tencent</li></a>
<a href="#"><li><img src="images/youku.jpg" /><br />Quality Life Partner_Youku</li></a>
<a href="#"><li><img src="images/tudou.jpg" /><br />Quality Life Partner_Tudou</li></a>
<a href="#"><li><img src="images/ku6.jpg" /><br />Quality Life Partner_ku6</li></a>
<a href="#"><li><img src="images/56.jpg" /><br />Quality Life Partner_56 Video</li></a>
</ul>
</div>
<div class="links_blank"></div>
<!-- partner ends -->
<!-- News starts -->
<div class="news">
<div class="news_blank"></div>
<div class="newsa">
<div class="news_into">
<div class="news_into_title">Company news / <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">INTO ZHONGSHI</span></div>
<div class="news_into_pic"><img src="images/into.jpg" /></div>
<div class="news_into_nr">
<ul>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
</ul>
</div>
<div class="more"><a href="#"><img src="images/more.jpg" /></a></div>
</div>
<div class="news_new">
<div class="news_into_title">Video Marketing / <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">NEWS CENTER </span></div>
<div class="news_into_pic"><img src="images/news_pic.jpg" /></div>
<div class="news_into_nr">
<ul>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
<a href="#"><li>>> Enterprises do corporate and product publicity and show in Beijing TV column...<span>2014/5/26</span></li></a>
</ul>
</div>
<div class="more"><a href="#"><img src="images/more.jpg" /></a></div>
</div>
<div class="news_wb">
<ul class="la">
<li onmouseover="xianshi1()"><a href="#"><img src="images/weibo.jpg" /></a></li>
<li onmouseover="xianshi2()"><a href="#"><img src="images/weixin.jpg" /></a></li>
</ul>
<ul class="lb">
<li id="xw">
<ul>
<img src="images/ny/weibo1.jpg" />
</ul>
</li>
<li id="tp">
<ul>
<img src="images/ny/weibo2.jpg" />
</ul>
</li>
</ul>
</div>
</div>
<!-- <div class="fh_top"><a href="#"><img src="images/top.png" /></a></div> -->
<div class="elevator_item">
<a class="elevator" onclick="return false;" ><img src="images/top.png" /></a>
</div>
</div>
<!-- End of news -->
<!-- bottom info start -->
<div class="bottom">
<div class="bottom_blank"></div>
<div class="bottom_nr">
<div class="bottom_pic"><a href="#"><img src="images/bottom_pic.jpg" /></a></div>
<div class="bottom_jj">Beijing Quality Life Column 1 Copyright©Beijing ICP Prepare No. 12027718-3 Prepare 09123656<br />
Address: First Line International Honeycomb, Chaoyang District, Beijing CBD Media Arts District Huirun Garden 7-12 400 Phone: 400-6628-009<br />
Contact: Manager Zhao Landline: 010-5622 8244 Mail: shichang@hmunion.com Technical support: NiuShang.com<br />
Wanted media cooperation>> Ask for a link>> List of partner sites>></div>
</div>
</div>
<!-- bottom info end -->
</body>
</html>
💒CSS style code
*{ text-decoration:none; margin:0; padding:0; list-style-type:none;}
body{ font-size:12px; color:#666; background:url(../images/pp.jpg) repeat-x; }
img{border:none;}
a{color:#666}
.top{width:1000px; height:150px; margin:auto;}
.logo{width:649px; height:89px; float:left; margin-top:35px}
.tel{width:296px; height:64px; float:right; margin-top:45px;}
.process{width:1000px; height:129px; line-height:155px; background:url(../images/process.jpg) no-repeat; margin:auto; font-size:40px; text-align:center; letter-spacing:9px; color:#ba0005}
.process_pic{width:1000px; height:185px; background:url(../images/process_pic.jpg); margin:auto}
.process_pic1 span{position:absolute; visibility:hidden; margin-left:-230px; margin-top:-250px}
.process_pic1:hover span{ visibility:visible; }
.process_pic1{width:132px; height:175px; float:left; margin-left:17px; margin-top:7px;}
.process_newnr{width:240px; height:100px; border:3px solid #a9a9a9; position:absolute; margin-left:100px; margin-top:100px; background:#fff; padding:15px; font-size:14px; color:#c80f21; line-height:24px; font-family: "Microsoft Yahei"}
.process_newnr p{color:#000; font-size:12px;}
.process_pic1a{width:132px; height:175px; float:left; position:absolute; background:#eee;}
.process_pic2{width:132px; height:178px; float:left; margin-left:34px; margin-top:7px;}
.process_pic2 span{position:absolute; visibility:hidden; margin-left:-230px; margin-top:-250px}
.process_pic2:hover span{ visibility:visible; }
.process_blank{width:1000px; height:91px; margin:auto}
.dotton_line{width:100%; height:63px; background:url(../images/dotton.jpg) center;}
.problem_top{width:100%; height:128px; background:url(../images/problem.jpg) center no-repeat #e2e2e4}
.problem_pic{width:100%; height:534px; background:url(../images/problem_pic.jpg) center no-repeat}
.dotton_line2{width:100%; height:55px; background:url(../images/dotton2.jpg) center;}
.links_blank{width:100%; height:43px; background:#fff;}
.links_title{width:100%; height:34px; background:url(../images/links_title.jpg) center no-repeat}
.links{width:1000px; height:220px; margin:0 auto;}
.links ul li{width:164px; height:90px; float:left; margin-left:30px; line-height:32px; margin-top:20px; text-align:center}
.links ul li:hover{color:#b90006}
.news{width:100%; height:586px; background:url(../images/news_pp.jpg)}
.news_blank{width:100%; height:75px;}
.newsa{width:1000px; height:460px; margin:0 auto;}
.news_into{width:330px; height:440px; float:left;}
.news_into_title{width:330px; height:34px; background:url(../images/into.png) center no-repeat; color:#ba0005; font-size:14px; line-height:36px;}
.news_into_pic{width:330px; height:71px; margin-top:10px;}
.news_into_nr{width:330px; height:275px; font-family:"Song Dynasty"; margin-top:20px;}
.news_into_nr span{float:right;}
.news_into_nr ul li{width:330px; height:32px; line-height:32px; border-bottom:1px dotted #adadad;}
.more{width:41px; height:17px; float:right}
.news_new{width:330px; height:440px; float:left; margin-left:35px;}
.news_wb{width:268px; height:440px; float:left; margin-left:35px; background:#fff; border:1px solid #cccccc;}
.weibo{width:268px; height:82px; background:url(../images/wb_pp.jpg)}
.weibo img{ margin-top:24px; margin-left:20px;}
/* main_image */
.main_visual{height:460px; overflow:hidden;position:relative;}
.main_image{height:460px;overflow:hidden;position:relative;}
.main_image ul{width:9999px;height:460px;overflow:hidden;position:absolute;top:0;left:0}
.main_image li{float:left;width:100%;height:460px;}
.main_image li span{display:block;width:100%;height:460px}
.main_image li a{display:block;width:100%;height:460px}
.main_image li .img_1{background:url(../images/img_main_2.jpg) center top no-repeat}
.main_image li .img_2{background:url(../images/img_main_1.jpg) center top no-repeat}
.main_image li .img_3{background:url(../images/img_main_2.jpg) center top no-repeat}
.main_image li .img_4{background:url(../images/img_main_1.jpg) center top no-repeat}
div.flicking_con{position:absolute;top:400px;left:77%;z-index:999;width:300px;height:21px;margin:0 0 0 -50px;}
div.flicking_con a{float:left;width:21px;height:21px;margin-left:10px;padding:0;background:url('../images/btn_main_img.png') 0 0 no-repeat;display:block;text-indent:-1000px}
div.flicking_con a.on{background-position:0 -21px}
#btn_prev,#btn_next{z-index:11111;position:absolute;display:block;width:73px!important;height:74px!important;top:50%;margin-top:-37px;display:none;}
#btn_prev{background:url(../images/hover_left.png) no-repeat left top;left:100px;}
#btn_next{background:url(../images/hover_right.png) no-repeat right top;right:100px;}
.fh_top{width:135px; height:37px; margin:5px auto;}
.bottom{width:100%; height:180px; background:url(../images/bottom_bg.jpg); float:left}
.bottom_blank{width:1000px; height:30px; margin:0 auto}
.bottom_nr{width:760px; height:110px; margin:0 auto;}
.bottom_pic{width:236px; height:103px; float:left;}
.bottom_jj{width:460px; height:100px; margin-left:25px; font-size:12px; font-family:"Song Dynasty"; color:#808080; float:left; line-height:27px;}
.elevatora{width:100%; height:68px; background:url(../images/news_pp.jpg); float:left}
.elevatora_blank{width:1000px; height:20px; margin:0 auto;}
.elevator_item {width:135px; height:68px; margin:0 auto;}
.elevator{width:135px; height:37px; cursor: pointer; margin:0 auto;}
.picture_reason3{width:1000px; height:450px; margin:auto; background:url(../images/ny/picture_reason3.jpg) no-repeat}
.picture_reason4{width:100%; height:480px; background:url(../images/ny/picture_reason4.jpg) center}
/* */
.join_banner{height:460px; overflow:hidden; background:url(../images/ny/join_banner.jpg) center no-repeat}
.join_trouble{width:1000px; height:385px; margin:0 auto; background:url(../images/ny/join_1.jpg)}
.join_reason1{width:1000px; height:450px; margin:auto; background:url(../images/ny/join_reason1.jpg) no-repeat}
.join_reason2{width:100%; height:480px; background:url(../images/ny/join_reason2.jpg) center no-repeat}
.join_reason3{width:1000px; height:450px; margin:auto; background:url(../images/ny/join_reason3.jpg) no-repeat}
.join_reason4{width:100%; height:480px; background:url(../images/ny/join_reason4.jpg) center}
/* */
.center_banner{height:460px; overflow:hidden; background:url(../images/ny/center_banner.jpg) center no-repeat}
/* */
.team_banner{height:460px; overflow:hidden; background:url(../images/ny/team_banner.jpg) center no-repeat}
/* */
.news_banner{height:460px; overflow:hidden; background:url(../images/ny/news_banner.jpg) center no-repeat}
.news_title{width:660px; height:40px; line-height:30px; text-align:center; font-size:21px; font-weight:bold; color:#444; margin-left:26px; line-height:24px; border-bottom:1px dotted #cbcbcb;}
.news_time{width:640px; height:40px; line-height:40px; font-size:12px; color:#cbcbcb; margin-left:56px; line-height:40px; }
.news_time span{width:110px; height:40px; float:left}
.news_end{width:660px; height:auto; margin-left:26px; line-height:24px;}
.news_end p{ text-indent:2em;}
/* */
.zhuce_banner{height:514px;background:url(../images/ny/emali_pic.jpg) center no-repeat}
/* */
.la{width: 268px; height: 82px; background:url(../images/wb_pp.jpg)}
.la li{width:100px; height: 32px; float: left; margin-left: 20px; margin-top:24px;}
.lb{width:268px; height:358px; background:red; overflow:hidden}
.new_blanka{width:230px; height:15px;}
.end_left{width:715px; height:auto; float:left}
.end_right{width:228px; height:auto; float:left; margin-left:10px;}
.end_up{width:230px; height:36px; line-height:36px; font-size:14px; font-weight:bold; background:url(../images/ny/up.jpg); color:#000; margin-top:8px; float:left}
.end_lm{width:228px; height:auto; border-left:1px solid #d5d5d5; border-right:1px solid #d5d5d5; float:left}
.end_lm ul li{width:200px; height:26px; line-height:26px; float:left; border-bottom:1px dotted #dfdfdf; margin-left: 14px; margin-top: 3px; font-family: "Arial"}
.end_lm ul li:hover{color:#ba0003; line-height:30px; font-weight:700}
.end_lm span{color:#ba0003}
.end_bottom{width:230px; height:6px; background:url(../images/ny/lm_bottom.jpg); float:left;}
.blank_team{width:200px; height:10px; float:left}
.right_centerf{width:713px; height:auto; border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf; float:left;}
.right_centerf ul li{width:660px; height:128px; margin-top:23px; margin-left:26px;}
.right_centerf img, .right_centerf span, .right_centerf p{float:left;}
.right_centerf img{border:1px solid #cfe9ff}
.right_centerf span{width:458px; height:25px; line-height:25px; margin-left:19px; font-size:14px; font-weight:bold;}
.right_centerf span a{color:#000;}
.right_centerf span a:hover{ text-decoration:underline}
.right_centerf p{width:458px; height:103px; margin-left:19px; font-size:12px; line-height:24px;}
6. 🥇 How to make learning no longer blind
First, study with goals, whether reading books or newspapers or various offline activities.
First of all, you must clarify what your learning goals are, what problems you want to solve, and what goals to achieve.
Second, learn to build a personal knowledge system
Knowledge is endless, and books are vast. When we roam to the fullest, we must not be drowned by the sea and have no self. In the process of learning, we will find that every knowledge point has its boundaries and backgrounds, we must be good at summarizing and sorting out knowledge
Third, learn to use
Sometimes, we feel that we have learned a lot of dry stuff in one day, so we must connect these knowledge points with actual work and life. Knowledge and practice are interlinked. Love of learning is a good thing, but only those who can learn are valuable.
7. 🎁More dry goods
1. If my blog is helpful to you, if you like the content of my blog, please "👍 Like" "✍️ Comment" "💙 Favorites" with one click!
2. 💗 [ 👇🏻👇🏻👇🏻 Focus on me| 💬 Get More Sources | Quality Articles] Take you to learn about various front-end plug-ins, 3D cool effects, picture display, text effects, as well as site-wide templates, college graduate HTML templates, final big job templates, and so on! "There are many front-end developers here who are exploring front-end Node knowledge and learning from each other."
3.
Technical related questions about the above content💌Welcome to exchange and learn together👇🏻👇🏻👇🏻💬
!