Один веб-сайт с функциональностью JS

Я довольно новичок в веб-разработке и хотел бы получить обратную связь. Это HTML /CSS, с некоторыми JS (зависание кнопок, прокрутка прокрутки и слайдеры изображений) из других источников. Комментарии к лучшим практикам и любые другие предложения были бы замечательными, поскольку я чувствую, что я, вероятно, много делаю неправильно, но конкретно:

  1. Я использовал контейнеры различного цвета, которые растягивают всю ширину страницы. Каждый контейнер находится внутри div, который задает цвет фона. Это лучший способ сделать это?

  2. Есть ли простой способ для меня вертикально сосредоточить мои текстовые блоки, вместо того, чтобы добавлять много меток linebreak?

  3. Многие мои div имеют несколько классов, например. «column last half image» и «centered large highlight» - следует ли это избегать, и если да, то как лучше всего это сделать?

Ссылка

HTML:

<!DOCTYPE html>

<html>
<head>

    <title>MVX Training | Welcome to the future of training</title>

    <meta name="description" content="3D Interactive Training">
    <meta name="keywords" content="3D, interactive, virtual, simulations, training, games, gamification">

    <link href='style.css' rel='stylesheet' type='text/css'>
    <link rel="icon" type="img/ico" href="images/favicon.ico">
    <link rel="image_src" href="screenshot.jpg" />

    <script src="js/jquery.min.js"></script>
    <script src="js/responsiveslides.min.js"></script>
    <script>
        $(function() {
            $(".rslides").responsiveSlides({
              auto: true,       // Boolean: Animate automatically, true or false
              speed: 700,       // Integer: Speed of the transition, in milliseconds
              timeout: 4000,    // Integer: Time between slide transitions, in milliseconds
              pager: false,     // Boolean: Show pager, true or false
              nav: false,       // Boolean: Show navigation, true or false
              maxwidth: "",     // Integer: Max-width of the slideshow, in pixels
            });
        });
    </script>

</head>
<body>

    <header>
        <div class="lightgrey">
            <div class="navcontainer">
                <div class="logo">
                    <img src="images/logo.png" />
                </div>
                <div class="navlinks">
                    <ul>
                        <li><a class="scroll" data-speed="700" href="#welcome">Welcome</a></li>
                        <li><a class="scroll" data-speed="1000" href="#features">Features</a></li>
                        <li><a class="scroll" data-speed="1400" href="#casestudies">Case Studies</a></li>
                        <li><a class="scroll" data-speed="1500" href="#development">Development</a></li>
                        <li><a class="scroll" data-speed="1600" href="#pricing">Pricing</a></li>
                        <li><a class="scroll" data-speed="1700" href="#getintouch">Get in Touch</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <div class="darkgrey">
        <div class="container">
            <div class="column">
                <p><br /><br /><br /></p>
                <a class="anchor" id="welcome"></a><h1 class="light"><br /><br />WELCOME TO THE FUTURE OF TRAINING</h1>
                <div class="underline light"></div>
                <p class="centered larger">MVX is an innovative new technology which leverages 3D gaming engines to provide immersive virtual training. 3D visuals and outcomes-focussed content are combined in a realistic 3D environment, allowing you to teach and assess operational procedures, hazard awareness and emergency scenario responses in an interactive and memorable way.</p><br />
                <center><img src="images/reel.png" /></center>
                <a href="#"><div class="button light">CONTACT US FOR A FREE DEMO</div></a>
            </div>
            <a class="scroll" data-speed="700" href="#features"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <a class="anchor" id="features"></a><h1>FEATURES</h1>
                <div class="underline"></div>
                <div class="column half">
                    <h2>SIMULATE EMERGENCY SCENARIOS</h2>
                    <p>Expose your personnel to realistic emergency and hazard scenarios so they can safely experience the potential consequences and dangers they can cause, and practise the appropriate responses to these emergencies.</p>
                </div>
                <div class="column half last image">
                    <img src="images/simulate_emergency_scenarios.png" />
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features2"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <div class="column">
                <div class="column half image rtl">
                    <img src="images/teach_consequences_effectively.png" />
                </div>
                <div class="column half last">
                    <a class="anchor" id="features2"></a><h2>TEACH CONSEQUENCES EFFECTIVELY</h2>
                    <p>Users can interact with the virtual 3D environment and make choices that will affect how their virtual character will fare, much like the real world. In these virtual environments, users can experience the consequences of those choices in a memorable way without the risk, and without the need to cease real operations.</p>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features3"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <div class="column half">
                    <a class="anchor" id="features3"></a><h2>SITE FAMILIARISATION</h2>
                    <p>Our talented team of 3D artists can create realistic 3D representations of your plant, site or work environment - whether it be existing or conceptual. These can be created using photographs, videos, blueprints or 3D CAD models. Interacting and exploring within this virtual environment will allow users to become familiar with important locations around site, minimising risk and improving efficiency.</p>
                </div>
                <div class="column half last image rtl">
                    <br /><br />
                    <img src="images/site_familiarisation.png" />
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features4"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <div class="column">
                <div class="column half image rtl">

                </div>
                <div class="column half last">
                    <a class="anchor" id="features4"></a><h2>COMMUNICATE SAFETY CULTURE</h2>
                    <p>Our training modules are custom-tailored to teach your user outcomes and safety culture in the most effective way. These may be communicated and tested through animated storylines and conversations within the 3D environment, engaging and interactive minigames, and simulated emergency scenarios.</p>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features5"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <div class="column half">
                    <a class="anchor" id="features5"></a><h2>VISUALISE COMPLEX PROCESSES</h2>
                    <p>(Removed for StackExchange char limit)</p>
                </div>
                <div class="column half last image rtl">
                    <img src="images/visualise_complex_processes.png" />
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features6"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <div class="column">
                <div class="column half image">

                </div>
                <div class="column half last">
                    <a class="anchor" id="features6"></a><h2>DETAILED USER REPORTING</h2>
                    <p>(Removed for StackExchange char limit)</p>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features7"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <div class="column half">
                    <a class="anchor" id="features7"></a><h2>DEPLOYMENT OPTIONS</h2>
                    <p>(Removed for StackExchange char limit)</p>
                </div>
                <div class="column half last image rtl">
                    <br />
                    <img src="images/deployment_options.png" />
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#casestudies"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <div class="column">
                <a class="anchor" id="casestudies"></a><h1>CASE STUDIES</h1>
                <div class="underline"></div>
                <h2>WOODSIDE HEAT STRESS</h2>
                <ul class="rslides">
                  <li><img src="images/case-studies/woodside-1.jpg"></li>
                  <li><img src="images/case-studies/woodside-2.jpg"></li>
                  <li><img src="images/case-studies/woodside-3.jpg"></li>
                  <li><img src="images/case-studies/woodside-4.jpg"></li>
                  <li><img src="images/case-studies/woodside-5.jpg"></li>
                </ul>
                <p>To complement their existing Broome induction, Woodside required an additional module to teach inductees about the dangers of heat stress. The module covered several related topics ranging from PPE, alcohol restrictions, real examples of heat stress, assessing personal risk, first aid response, emergency response and incident reporting.</p>
                <p class="parabreak">&nbsp;</p>
                <p>Inductees are placed in various realistic scenarios, including emergency scenarios, in which they must apply the knowledge they have learnt throughout the module. They are taught to be aware of their own hydration/heat stress levels, as well as those of their co-workers.</p>
                <div class="quote">
                    <p>"The software developed by Sentient for Woodside's Kimberley induction program has provided workers with a more engaging and effective site induction."</p>
                    <div class="author">
                        <p>- Jim McQueenie / Health, Safety & Security Manager / Woodside Browse LNG Development</p>
                    </div>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#casestudies2"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <br /><br /><br />
                <a class="anchor" id="casestudies2"></a><h2>ACID PLANT FILTER PRESS</h2>
                <ul class="rslides">
                  <li><img src="images/case-studies/acid-1.jpg"></li>
                  <li><img src="images/case-studies/acid-2.jpg"></li>
                  <li><img src="images/case-studies/acid-3.jpg"></li>
                  <li><img src="images/case-studies/acid-4.jpg"></li>
                  <li><img src="images/case-studies/acid-5.jpg"></li>
                  <li><img src="images/case-studies/acid-6.jpg"></li>
                  <li><img src="images/case-studies/acid-7.jpg"></li>
                </ul>
                <p>This training module was developed to teach complex procedures to new and existing staff at a plant dealing with hazardous chemicals. The procedures were taught by utilising three fundamental stages: Show, Interact, and Assess. Trainees were first shown the correct procedure, then were allowed to interact with the virtual scene to practise the procedure, and finally were assessed on what they had learnt.</p>
                <p class="parabreak">&nbsp;</p>
                <p>Visual animations, combined with an accurate and immersive 3D representation of the real site allowed trainees to familiarise themselves with the procedure and site before being physically inducted.</p>
                <div class="stat">
                    <p>&nbsp;</p>
                    <p>The company was able to reduce its training time from 3 days per trainee to just 1.</p>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#development"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="darkgrey">
        <div class="container">
            <a class="anchor" id="development"></a><h1 class="light">DEVELOPMENT</h1>
            <div class="underline light"></div>
            <div class="flowbox">Project start-up meeting (with client) to discuss requirements and deliverables</div>
            <div class="flowline"></div>
            <div class="flowbox">Customer delivers existing training material & other supporting documentation and assets</div>
            <div class="flowline"></div>
            <div class="flowbox">Create pre-visualisation (3D storyboard)</div>
            <div class="flowline"></div>
            <div class="flowbox right">Make adjustments</div>
            <div class="flowbox rounded">Client approves?</div>
            <p class="centered">Yes</p>
            <div class="flowline"></div>
            <div class="flowline"></div>
            <div class="flowbox">Develop any remaining 3D content</div>
            <div class="flowline"></div>
            <div class="flowbox">Implement animations and interactions</div>
            <div class="flowline"></div>
            <div class="flowbox">Implement training outcomes</div>
            <div class="flowline"></div>
            <div class="flowbox">Create a build and deliver to customer</div>
            <div class="flowline"></div>
            <div class="flowbox right">Make adjustments</div>
            <div class="flowbox rounded">Client approves?</div>
            <p class="centered">Yes</p>
            <div class="flowline"></div>
            <div class="flowbox">Project closure</div>
            <a class="scroll" data-speed="700" href="#pricing"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <a class="anchor" id="pricing"></a><h1>PRICING</h1>
            <div class="underline"></div>
            <p>As each module is customised, the pricing will vary depending on several factors. Below is an estimation of our average module prices. Please contact us directly for a specific quote.</p><br />
            <div class="column third lightgrey">
                <h2 class="centered">BASIC</h2>
                <div class="price"><br /><br /><br />15k</div>
            </div>
            <div class="column third lightgrey">
                <h2 class="centered">MEDIUM</h2>
                <div class="price"><br /><br /><br />50k</div>
            </div>
            <div class="column third last lightgrey">
                <h2 class="centered">COMPLEX</h2>
                <div class="price"><br /><br /><br />85k</div>
            </div>
            <div class="column third">
                <p class="centered">10-20 minutes of gameplay<br />
                Basic 3D environment and assets<br />
                Basic 3D animations<br />
                1-2 non-player characters<br />
                In-house voiceovers</p>
            </div>
            <div class="column third">
                <p class="centered">20-40 minutes of gameplay<br />
                Realistic 3D environment and assets<br />
                Realistic 3D animations<br />
                3-5 non-player characters<br />
                Professional voiceovers</p>
            </div>
            <div class="column third last">
                <p class="centered">40-60 minutes of gameplay<br />
                Realistic 3D environment and assets<br />
                Realistic 3D animations<br />
                6-10 non-player characters<br />
                Professional voiceovers</p>
            </div>
            <a class="scroll" data-speed="700" href="#getintouch"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="darkgrey">
        <div class="container contact">
            <a class="anchor" id="getintouch"></a><h1 class="light">GET IN TOUCH</h1>
            <div class="underline light"></div>
            <p class="centered larger">See what you can achieve with MVX Training. Contact us for a free demo today.</p>
            <a href="#"><div class="button light">CONTACT US FOR A FREE DEMO</div></a>
            <p class="centered larger">Or call us on</p>
            <p class="centered larger highlight">+61 8 9240 7888</p>
        </div>
    </div>

    <div class="darkestgrey">
        <div class="container">
            <center><img src="images/sentient_logo.png" /></center>
            <p class="centered larger">204 Balcatta Road, Balcatta WA 6021</p>
            <p class="centered larger"><a href="http://sencom.com.au" target="_blank">www.sencom.com.au</a></p>
        </div>
    </div>

</body>

<script src="js/smooth-scroll.js"></script>

</html>

CSS

/* ---------------------------------------------------------------

MVX TRAINING WEBSITE
URL: 
Company:
Year: 2014


------- SWATCHES USED: --------
Dark  backgrounds:      #1b1b1b
Darkest backgrounds:    #090909
Light backgrounds:      #eeeeee
Lightest backgrounds:   #f5f5f5
Dark text:              #1b1b1b
Light text:             #fff
Light grey text:        #9e9e9e
Orange highlights:      #f98c0b
-------------------------------

--------------------------------------------------------------- */


/* --------------------------- OPEN SANS --------------------------- */

/* Light */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 300;
    font-style: normal;

}

/* Light Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-LightItalic-webfont.eot');
    src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: 300;
    font-style: italic;

}


/* --------------------------- GENERAL --------------------------- */

body {
    background-color: #fff;
}

a {
    outline: 0; 
}

a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

* {
    margin: 0;
    padding: 0;
}

/* --------------------------- FONTS --------------------------- */

p, body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-align: justify;
    line-height: 28px;
    color: #1b1b1b;
}

p a {
    color: #f98c0b;
    text-decoration: none;
}

p a:hover {
    text-decoration: underline;
}

.darkgrey p, .darkestgrey p {
    color: #9e9e9e;
}

p.larger {
    font-size: 16px;    
}

p.parabreak {
    line-height: 14px;
}

.quote {
    min-height: 100px;
    width: 60%;
    float: right;
    margin: 10px 120px 10px 10px;
    font-style: italic;
    color: #000;
    background: url('images/quote.png') 1.4em 1.6em no-repeat;
    padding: 10px 10px 10px 90px;
}

.author {
    font-style: normal;
}

.stat {
    min-height: 100px;
    width: 60%;
    float: right;
    margin: 10px 120px 10px 10px;
    font-style: italic;
    color: #000;
    background: url('images/stat.png') 1.4em 1.6em no-repeat;
    padding: 6px 10px 10px 90px;
}

h1 {
    letter-spacing: 2px;
    font-weight: 300;
    text-align: center;
    font-size: 36px;
    color: #1b1b1b;
    margin-top: 20px;
    margin-bottom: 20px;
}

h1 a {
    text-decoration: inherit;
    color: inherit;
}

h1.light {
    color: #fff;
}

h2 {
    letter-spacing: 2px;
    font-weight: 300;
    font-size: 22px;
    text-align: justify;
    margin-bottom: 20px;
}

h2.light {
    color: #fff;
}

.underline {
    background-color: #1b1b1b;
    width: 70px;
    height: 2px;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px;
}

.underline.light {
    background-color: #fff;
}

.centered {
    text-align: center; 
}

.highlight {
    color: #f98c0b;
}

/* --------------------------- CONTAINERS --------------------------- */

.container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    padding-top: 30px;
    padding-bottom: 30px;
}

.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.nobottompadding {
    padding-bottom: 0px;
}

.container.contact {
    background-image: url('images/contact.png');
    background-repeat: no-repeat;
}

/* --------------------------- COLUMNS --------------------------- */

.column {
    width: 960px;
    float: left;
}

.column:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.column.third {
    float: left;
    margin-right: 20px;
    width: 306px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.column.last {
    margin-right: 0px;
    float: right;
}

.column.half {
    width: 460px;
    min-height: 300px;
    margin-top: 120px;
}

.column.rtl {
    direction: rtl;
}

.column.ltr {
    direction: ltr;
}

.column.image {
    margin: 0px;
}

/* --------------------------- COLORS --------------------------- */

.darkgrey {
    background-color: #1b1b1b;
}

.darkestgrey {
    background-color: #090909;
}

.lightgrey {
    background-color: #eeeeee;
}

.lightestgrey {
    background-color: #f5f5f5;
}

/* --------------------------- BUTTONS --------------------------- */

.button {
    position: relative;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    border: solid 2px #f98c0b;
    display: inline-block;
    width: 240px;
    left: 50%;
    margin: 20px auto;
    margin-left: -160px;
    padding: 10px 40px 10px 40px;
    transition: all 0.2s linear;
}

.button:hover {
    width:260px;
    margin-left:-170px;
    -webkit-transition:500ms linear; 
}

.button.light {
    color: #fff;
}

.nextbutton {
    padding-top: -2px;
    float: right;
    text-align: right;
    font-size: 12px;
    width: 48px;
    height: 16px;
    background-image: url('images/arrow.png');
    background-repeat: no-repeat;
    margin-top: 20px;
    margin-bottom: 20px
}

.nextbutton a {
    color: inherit;
    text-decoration: none;
}

.darkgrey a, darkestgrey a {
    color: #fff;
}

.scroll {
    color: inherit;
    text-decoration: none;
}

/* --------------------------- NAVIGATION --------------------------- */

header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #eeeeee;
    margin: 0px;
}

.navcontainer {
    width: 960px;
    margin: 0 auto;
    height: 88px;
}

.navcontainer:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.navlinks {
    float: right;
    margin-right: 10px;
    padding-top: 28px;
}

ul li {
    text-transform: uppercase;
    font-size: 12px;
    display: inline;
    color: #1b1b1b;
    margin-left: 40px;
}

ul li a {
    color: inherit;
    text-decoration: none;
}

ul li a:hover {
    border-bottom: 2px solid #f98c0b;
    padding-bottom:4px;
}

.logo {
    float: left;
    margin: 0 auto;
    padding: 0px;
    height: 150px;
    width: 150px;
}

/* --------------------------- PRICING --------------------------- */

.price {
    font-size: 60px;
    text-align: center;
    margin: 30px 50px 10px 50px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid #f98c0b;
}

/* --------------------------- FLOWCHART --------------------------- */

.flowbox {
    text-align: center;
    color: #fff;
    width: 260px;
    border: 2px solid #f98c0b;
    margin: auto;
    padding: 20px;
}

.flowbox.right {
    float: right;
    display: inline;
}

.flowbox.rounded {
    width: 160px;
    border-radius: 50%;
}

.flowline {
    font-size: 0;
    width: 3px;
    height: 20px;
    background-color: #3b3b3b;
    margin: auto;
}

/* --------------------------- SLIDER --------------------------- */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
}

.rslides li:first-child {
  position: relative;
  float: left;
}

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  margin-bottom: 20px;
}
11 голосов | спросил kitsu333 23 Jam1000000amThu, 23 Jan 2014 09:28:07 +040014 2014, 09:28:07

2 ответа


11

CSS

Вместо 5 разных правил все говорят одно и то же для 5 селекторов. Вы можете группировать их следующим образом.

h1.light,
h2.light,
.darkgrey a,
.darkestgrey a,
.button.light
 {
    color: #fff;
}

body,
.underline.light {
    background-color: #fff;
}

Используйте одну строку для полей.

h1 {
    margin-top: 20px 0;
}

h2 {
    margin: 0 0 20px 0;
}

.underline {
    margin: 20px auto 30px;
}

.button {
    margin: 20px auto 20px -160px;
}

.nextbutton {
    margin: 20px 0;
}

Используйте одну строку для прокрутки.

.container {
    padding: 30px 0;
}

.column.third {
    padding: 30px 0;
}

HTML

Вы должны удалить это из головы.

<meta name="keywords" content="3D, interactive, virtual, simulations, training, games, gamification">

Большинство поисковых систем больше не используют мета-ключевые слова для своего верхнего рейтинга алгоритма. Из того, что я слышал, наличие мета ключевых слов можно считать только против вас для SEO (поисковая оптимизация). Потому что я считаю, что поисковые системы будут по-прежнему наказывать сайт за наличие ложных и повторяющихся ключевых слов. Да, ваши ключевые слова верны, но нет смысла включать их на веб-сайты больше. http://en.wikipedia.org/wiki/Meta_element#The_keywords_attribute

Описание все еще используется и очень важно, потому что оно, вероятно, появится при поиске вашего сайта. Тем не менее, поисковые системы могут показывать что-то отличное от вашего описания на основе ключевых слов для поиска пользователей. Описание должно быть более подробным и длинным, чем просто «3D-интерактивное обучение».

<meta name="description" content="3D Interactive Training">

http://en.wikipedia.org/wiki/Meta_element#The_description_attribute


Нет ничего плохого в разрыве строк, так что это то, что вы предпочитаете использовать. То, как вы использовали их здесь, довольно необычно.

<div class="column">
                <p><br /><br /><br /></p>
                <a class="anchor" id="welcome"></a><h1 class="light"><br /><br />WELCOME TO THE FUTURE OF TRAINING</h1>

Я бы, вероятно, изменил это на следующее:

<div class="column">
                <a class="anchor" id="welcome"></a><h1 class="firsth1 light">WELCOME TO THE FUTURE OF TRAINING</h1>

#welcome { margin: 40px 0 0 0; }   /* adjust accordingly */
.firsth1 { margin: 20px 0 0 0; }  /* adjust accordingly */

Как вы их здесь выглядите прекрасно.

<div class="column half last image rtl">  
      <br /><br />  
      <img src="images/site_familiarisation.png" />  
</div> 

У вас тоже немало строк.

<div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

Я бы изменил его на что-то вроде этого:

<div class="nextbutton">NEXT</div>

.nextbutton {
    text-align: right;  /* this might not work */
    padding: 0 0 0 20px; /* then you could do something like this instead */  /* adjust accordingly */
}

Наконец, я думаю, что ваше использование классов в порядке. Мне также нравится, как вы использовали ограниченное число id, что слишком часто может привести к тому, что ваш css будет содержать больше символов, чем необходимо.

ответил CRABOLO 23 Jam1000000amThu, 23 Jan 2014 10:03:35 +040014 2014, 10:03:35
7

Вот несколько быстрых и неисчерпывающих комментариев:

Неправильное использование br

Ваше использование br неверно, вы должны использовать для этого margin или padding.

Например, чтобы иметь фиксированное меню, просто поместите другой контент в div и дайте это поле div-top.
(Или вы можете взломать его с помощью header+* { margin-top: 40px; } или ...)

См. примеры в http://developers.whatwg.org/text-level -semantics.html #-уш-элемент
, где это указано:

  
    

В то время как разрывы строк обычно представлены на визуальных носителях, физически перемещая последующий текст в новую строку, таблица стилей или пользовательский агент были бы одинаково оправданы, если бы разрывы строк отображались другим способом, например, как зеленые точки, или в качестве дополнительного интервала.

  
     Элементы

br должны использоваться только для разрывов строк, которые фактически являются частью содержимого, как в стихах или адресах.

     

(...)

     

Если абзац состоит только из одного элемента br, он представляет пустую строку-заполнитель (например, как в шаблоне). Такие пустые строки не должны использоваться для целей презентации.

Неправильное использование &nbsp;

Аналогично предложению о br.

Например, удалите &nbsp; s из div.nextbutton и используйте css, чтобы поместить все на место: .nextbutton { padding-right: 18px; /*16+2*/ background-position: right center;}

Недопустимый HTML

Ваш HTML недействительно .

Кроме того, я не могу этого достаточно подчеркнуть: вы должны использовать UTF8 как кодировку по умолчанию , а не ASCII.

ответил ANeves 23 Jpm1000000pmThu, 23 Jan 2014 18:13:59 +040014 2014, 18:13:59

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132